DM Design » html http://www.dmdesign.ro Solutia completa pentru un site perfect | Web Design, Web Site, Intretinere Web, Optimizare SEO, Grafica, Wed, 28 Sep 2011 17:35:29 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Creati un formular de contact care arata bine fara tabel http://www.dmdesign.ro/html-si-css/creati-un-formular-de-contact-care-arata-bine-fara-tabel.dmdesign http://www.dmdesign.ro/html-si-css/creati-un-formular-de-contact-care-arata-bine-fara-tabel.dmdesign#comments Sun, 18 Oct 2009 17:38:40 +0000 ionut.mantescu http://www.dmdesign.ro/?p=960 Acest ghid explică modul în care puteți proiecta un formular de contact care arata bine utilizând un design curat utilizând CSS pentru a simula o structură de tabel HTML.

form-17

1. Pasul 1. Creați structura HTML





Formular de contact

2. Pasul 2. Crearea codului CSS

*{ margin:0; padding:0;}
body{ font:100% normal Arial, Helvetica, sans-serif; background:#161712;}
form,input,select,textarea{margin:0; padding:0; color:#fff;}

div.box{
margin:0 auto;
width:500px;
background:#222;
position:relative;
top:50px;
border:1px solid #262626;
}

div.box h1{
color:#FFF5CC;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712;
}

div.box label{
width:100%;
display: block;
background:#1C1C1C;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}
div.box label span{
display: block;
color:#bbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}

div.box .input_text{
padding:10px 10px;
width:200px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333;
border-right:1px double #333;
}

div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333;
border-right:1px double #333;
overflow:hidden;
height:150px;
}

div.box .button
{
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}

În cele din urmă am terminat. Am creat un formular de contact care arată bine fără a folosi un tabel.

Vizualizați forma finală

]]> http://www.dmdesign.ro/html-si-css/creati-un-formular-de-contact-care-arata-bine-fara-tabel.dmdesign/feed 2 Creati efect de gradient la text folosind CSS http://www.dmdesign.ro/html-si-css/creati-efect-de-gradient-la-text-folosind-css.dmdesign http://www.dmdesign.ro/html-si-css/creati-efect-de-gradient-la-text-folosind-css.dmdesign#comments Wed, 11 Feb 2009 11:10:25 +0000 ionut.mantescu http://www.dmdesign.ro/?p=553 Vreti sa creati titluri cu efect de gradient fara sa stati sa desenati de fiecare data in Photoshop? In urmatoarele randuri va voi arata cum sa creati aceasta foarte simplu utilizand doar CSS si o imagine PNG.

Ceea ce aveti nevoie este un element <span> in heading si sa aplicati pozitia imaginii de fundal folosind proprietatea CSS position:absolute. Acest efect a fost testat pe mai multe browser-e: Firefox, Safari, Chrome, Opera, IE7, chiar si pe IE6.

Plus-uri

  • - Acest efect se face utilizand numai CSS, fara Javascript sau Flash. Functioneaza pe majoritatea browser-elor incluzand IE6 (necesar hack-ul PNG)
  • - Este perfect pentru Titluri. Nu mai trebuie sa renderizati fiecare titlu in parte cu Photoshop-ul sau alt program de grafica. Folosind metoda economisiti timp, spatiu pe server si chiar latimea de banda a internetului :) .
  • - Poate fi folosit cu orica font, iar dimensiunea fontului ramane modificabila.

Cum functioneaza?

Este foarte simplu. Practic vom aplica o imagine PNG de doar 1px latime cu (transparent) peste text.

screen1

Codul HMTL

CSS Gradient Text

Codul CSS

Elementul caruia ii vom aplica efectul este h1 si h1 span

h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

Folosirea in IE6

Din moment ce IE6 nu afiseaza PNG-24 corect, urmatorul cod este necesar pentru afisarea corecta a PNG transparente (adaugati oriunde intre <head> si </head>)

Versiunea JQuery (pentru adeptii javascript)

Daca nu vreti sa aveti elementele <span> in heading, puteti folosi versiune Javascript.

Mai multe exemple:

screen2

screen3

screen5

screen6

screen7

screen9

Practic puteti aplica pe orice culoare de fundal atata timp cat culoarea de gradient este ca si fundaul.

Limitari

  • - Se poate folosi doar peste culori de fundal uniforme. Culoarea gradientului trebuie sa fie aceeasi cu cea de fundal.
  • - Hack-ul PNG este necesar pentru a functiona pe IE6.
  • - Daca imaginea PNG este mai inalta decat textul, nu veti mai putea selecta textul.
]]> http://www.dmdesign.ro/html-si-css/creati-efect-de-gradient-la-text-folosind-css.dmdesign/feed 1 Scaneaza directoarele cu PHP http://www.dmdesign.ro/ajax/scaneaza-directoarele-cu-php.dmdesign http://www.dmdesign.ro/ajax/scaneaza-directoarele-cu-php.dmdesign#comments Wed, 19 Nov 2008 13:26:43 +0000 ionut.mantescu http://ionutdesign.wordpress.com/?p=87 scaneaza-directoarele-cu-phpSa ne imaginam ca dorim sa avem o pagina in care sa vizualizam toate imaginile noastre.

O posibilitate este sa inseram imagine cu imagine in codul sursa. Ar fi o idee buna.. daca nu ar trebui ca de fiecare data cand vrem sa adaugam un element nou trebuie sa mai adaugam manual cateva linii de cod.

O alta metoda ar fi sa folosim o baza de date MySQL. Aceasta metoda este perfecta pentru majoritatea site-urilor.

Dar, de nenumarate ori cea mai buna solutie este sa utilizam PHP-ul pentru scanarea “portofoliului” tau si apoi sa creeze dinamic codul sursa pentru voi. Apoi daca vreti ca in pagina sa apara un nou preview, trebuie doar sa copiati imaginea si preview-ul ei in directorul prestabilit si sa lasati PHP-ul sa faca restul.

Sa punem pe foaie ce anume ne trebuie:

- folosirea PHP pentru a scana directorul cu imagini. Va scana fiecare imagine si o va afisa in pagina noastra.
- o sa folosim css pentru formatarea paginii.
- cand un utilizator da click pe un preview, vom folosi JQuery pentru a vizualiza imaginea intreaga.
- daca utilizatorul are Javascript dezactivat, el va fi automat directionat catre o pagina ce contine imaginea la dimensiunea normala.

Cum utilizam?

Adaugarea imaginilor la portofoliu este simpla. Imaginile trebuie sa aiba dimensiunea de 500x350px. Adaugati imaginile in directorul “images/featured”.
Preview-rile trebuie sa aiba dimensiunea 50x50px si adaugate in directoru “images/tn”.

Fisierul HTML

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <title>Scanning Directories with PHP</title>
  5. <script src=“js/jquery-1.2.6.pack.js” type=“text/javascript”></script>
  6. <script src=“js/scripts.js” type=“text/javascript”></script>
  7. <link href=“default.css” rel=“stylesheet” type=“text/css” />
  8. </head>
  9. <body>
  10. <div id=“container”>
  11. <h1>Some Portfolio</h1>
  12. <div id=“featured”>
  13. <?php
  14. $featured_dir = ‘images/featured/’;
  15. $scan = scandir($featured_dir);
  16. echo ‘<img src=”‘. $featured_dir . $scan[2] . ‘” alt=”image” />’;
  17. ?>
  18. </div>
  20. <ul id=“options”>
  21. <?php
  22. $dir = ‘images/tn/’;
  23. $scan = scandir($dir);
  25. for ($i=0; $i<count($scan); $i++) {
  26. if ($scan[$i] != ‘.’ && $scan[$i] != ‘..’) {
  27. echo ‘
  28. <li>
  29. <a href=”‘ . $featured_dir . $scan[$i] . ‘”>
  30. <img src=”‘. $dir . $scan[$i] . ‘” alt=”‘. $scan[$i] . ‘” />
  31. </a>
  32. </li>’;
  33. }
  34. }
  35. ?>
  36. </ul>
  37. </div>
  38. </body>
  39. </html>

Fisierul CSS

Puteti vizualiza fisierul css aici.

Pentru Internet Explorer 6 trebuie sa mai adaugam la fisierul css urmatorul cod

  1. ul#options {
  2. …misc styles…
  3. height: 1%;
  4. }

Codul Javascript complet (JQuery)

  1. $(function() {
  2. $.preloadImage = function(path) {
  3. $(“#featured img”).attr(“src”, path);
  4. }
  6. $(‘ul#options li img’).click(function() {
  7. $(‘ul li img’).removeClass(‘selected’);
  8. $(this).addClass(‘selected’);
  10. var imageName = $(this).attr(‘alt’);
  12. $.preloadImage(‘images/featured/’ + imageName);
  14. var chopped = imageName.split(‘.’);
  15. $(‘#featured h2′).remove();
  16. $(‘#featured’)
  17. .prepend(‘<h2 class=”description”>’ + chopped[0] + ‘</h2>’).children(‘h2′).fadeIn(500).fadeTo(200, .6);
  18. });
  20. $(‘ul#options li a’).click(function() {
  21. return false;
  22. });
  23. });

Puteti descarca codul sursa complet de aici.

]]> http://www.dmdesign.ro/ajax/scaneaza-directoarele-cu-php.dmdesign/feed 0 Cum sa creezi propriul script pentru Contact http://www.dmdesign.ro/ajax/cum-sa-creezi-propriul-script-pentru-contact.dmdesign http://www.dmdesign.ro/ajax/cum-sa-creezi-propriul-script-pentru-contact.dmdesign#comments Tue, 18 Nov 2008 11:43:05 +0000 ionut.mantescu http://ionutdesign.wordpress.com/?p=6 Ajax (Asynchronous Javascript and Xml) a devenit o unealta foarte populara in web design. Acest tutorial te va invata cum sa-ti creezi propriul script pentru Contact folosind PHP si JQuery.

Pasul 1 – HTML

Pentru inceput vom crea un nou fisier pe care il vom numi contact.html, in care o sa cream un formular html simplu, ca in exemplul urmator:

<div class="loader"></div>
<div class="bar"></div>
<div id="container">
  <form id="contactForm" method="" action="mail.php">
  <p>
    <label for="name">Name </label>
    <input id="name" name="name" />
  </p>
  <p>
    <label for="email">E-Mail </label>
    <input id="email" name="email" />
  </p>
  <p>
    <label for="message">Your Message </label>
    <textarea id="message" name="message" rows="4" cols="30" ></textarea>
  </p>
  <p>
    <input class="submit" type="submit" value="submit"/>
  </p>
  </form>
</div>

Acum am obtiunt un formular de contact care va trimite datele catre mail.php

Pasul 2 – PHP

Acum vom crea un fisier php numit mail.php – acesta va prelua datele din formularul nostru.

<?php
//declare our variables
$name = $_GET['name'];
$email = $_GET['email'];
$comment = $_GET['comment'];
//get todays date
$todayis = date("l, F j, Y, g:i a") ;
//set a title for the message
$subject = "A message";
$message = " Message: $comment \r \n From: $name  \r \n Reply to: $email";

//put your email address here
mail("email@address.com", $subject, $message);
?>
<!--Display a thankyou message in the callback -->
<h1><span>Thank you  <h10><?php echo $name ?></h10></span></h1>
<p>
  <span>Your message will be answered as soon as possible.</span>
</p>
<h3>Message sent on: </h3>
<p>
  <span><?php echo $todayis ?></span>
</p>

In aceasta pagina vom crea cateva variabile care vor prelua numele, adresa de email si mesajul din formular, apoi folosind functia php mail() va trimite acestea catre adresa specificata. Pentru acest tutorial am folosit adresa email@example.com, dar puteti folosi orice adresa doriti.
Dupa ce email-ul s-a trimis, script-ul va afisa un mesaj de multumire folosind informatiile colectate din formular.

Pasul 3 – JQuery

Acum urmeaza partea cea mai interesanta. Pentru a putea incepe trebuie sa includem scripul JQuery. Puteti descarca de pe site-ul jquery, apoi sa includeti in header-ul html urmatoarea linie:

<script type="text/javascript" src="yourDirectory/jquery.js">

Jquery este un script java creat pentru a face lucrul cu dvs mai usor si eficient. Daca este prima data cand va intalniti cu acest script puteti intra pe 15 Days of JQuery.
Dorim sa cream o functie care sa trimita formularul nostru fara sa ne mai trimita catre alta pagina. Putem face aceasta astfel:

//engage on the page load
$(function() {
  //trigger ajax on submit
  $('#contactForm').submit( function(){

    //hide the form
    $('#contactForm').hide();

    //show the loading bar
    $('.loader').append($('.bar'));
    $('.bar').css({display:'block'});

    //send the ajax request
    $.get('mail.php',{name:$('#name').val(),
                      email:$('#email').val(),
                      comment:$('#message').val()},

    //return the data
    function(data){
      //hide the graphic
      $('.bar').css({display:'none'});
      $('.loader').append(data);
    });

  //stay on the page
  return false;
  });
});

Acest cod va folosi un eveniment care va ascunde formularul si va afisa o bara de progres atunci cand formularul este trimis. $.get() este linia care face scriptul sa apeleze mail.php si sa trimita detaliile formularului folosind metoda GET. Odata ce scriptul este apelat corect rezultatul v-a fi afisat pe ecran.

Pasul 4 – CSS

Ultimul pas este sa adaugam formatarea css formularului nostru pentru a ne asigura ca acesta este afisat corect si estetic. Nu este necesar, dar face afisarea acestuia mult mai buna.

body {
  font-family:helvetica;
}

.loader {

}

.bar{
  display:none;
  background: url('ajax-loader.gif') no-repeat;
  margin-left:20px;
  margin-top:50px;
  height:20px;
  width: 230px;
}

#contactForm{
  float:left;
  position:relative;
  background-color: #fdfdfd;
  height: 200px;
}

#container {
  padding:20px;
  float:left;
  position:relative;
  height: 200px;
  width: 100px;
}

Pasul 5 – Finalizarea proiectului

Daca punem totul impreuna, atunci fisierul contact.html ar trebui sa arate asa:

<html>
<head>
<script type="text/javascript" src="../jquery.js"></script>

<script type="text/javascript">
//engage on the page load
$(function() {
  //trigger ajax on submit
  $('#contactForm').submit( function(){

  //hide the form
  $('#contactForm').hide();

  //show the loading bar
  $('.loader').append($('.bar'));
  $('.bar').css({display:'block'});

  //send the ajax request
  $.get('mail.php',{name:$('#name').val(),
                    email:$('#email').val(),
                    comment:$('#message').val()},

  //return the data
  function(data){
    //hide the graphic
    $('.bar').css({display:'none'});
    $('.loader').append(data);
  });

  //stay on the page
  return false;
  });
});
</script>
<style type="text/css">

body {
  font-family:helvetica;
}

.loader {

}

.bar{
  display:none;
  background: url('ajax-loader.gif') no-repeat;
  margin-left:20px;
  margin-top:50px;
  height:20px;
  width: 230px;
}

#contactForm{
  float:left;
  position:relative;
  background-color: #fdfdfd;
  height: 200px;
}

#container {
  padding:20px;
  float:left;
  position:relative;
  height: 200px;
  width: 100px;
}

</style>
</head>
<body>
<div class="loader"></div>
<div class="bar"></div>
<div id="container">
  <form id="contactForm" method="" action="mail.php">
  <p>
    <label for="name">Name </label>
    <input id="name" name="name" />
  </p>
  <p>
    <label for="email">E-Mail </label>
    <input id="email" name="email" />
  </p>
  <p>
    <label for="message">Your Message </label>
    <textarea id="message" name="message" rows="4" cols="30" ></textarea>
  </p>
  <p>
    <input class="submit" type="submit" value="submit"/>
  </p>
  </form>
</div>
</body>
</html>

Este asa de simplu. :)
Puteti descarca intregul script de aici.

]]> http://www.dmdesign.ro/ajax/cum-sa-creezi-propriul-script-pentru-contact.dmdesign/feed 3