DM Design » css 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 Creati butoane deosebite folosind CSS si metoda sliding doors http://www.dmdesign.ro/html-si-css/creati-butoane-deosebite-folosind-css-si-metoda-sliding-doors.dmdesign http://www.dmdesign.ro/html-si-css/creati-butoane-deosebite-folosind-css-si-metoda-sliding-doors.dmdesign#comments Tue, 10 Feb 2009 14:38:38 +0000 ionut.mantescu http://www.dmdesign.ro/?p=518 In acest articol va voi arata cum sa creati butoane folosind CSS si metoda sliding doors. Este mult mai bine sa folositi aceasta metoda decat sa folositi butoane de tip imagine pentru ca se poate aplica stilul oricarui link si in acelasi timp nu este nevoie sa creati cate o imagine pentru fiecare buton in parte.

Ce este metoda sliding doors?

Aceasta metoda este foarte simpla. Daca vrem sa avem un buton a carui latime sa fie dinamica, va trebui sa gasim o metoda sa il micsoram sau marim pe orizontala. Vom face asta folosind doua imagini care vor defini butonul: una pentru partea stanga si una pentru partea dreapta ca in exemplul urmator.

button_left button_right

Imaginea mai mica din partea dreapta va fi pozitionata deasupra celei din stanga (de aceea metoda se numeste sliding doors). Cu cat imagine din dreapta va fi pozitionata spre partea stanga, cu atat butonul va fi mai mic si invers.

sliding_doors

Crearea butonului

Pentru inceput sa vedem codul HTML care simuleaza butonul. Vom avea elementul <span> in interiorul elementului <a>. Elementul <span> contine imaginea din stanga, cea mare si textul. Latimea butonului va fi data de latimea textului.

[code="html"]Submit[/code]

Acum o sa vedem codul CSS. Clasa .button care va fi aplicata elementului <a>. Clasa .button span va fi aplicata elementului <span> din elementul <a>.
De asemenea vom avea si clasa .button:hover span care o sa schimbe stilul textului din elementul <span>.

Si.. cam asta este :) Simplu.. nu?

[code="css"]a.button {
/* pozitionarea imaginii din dreapta */
background: transparent url('button_right.png') no-repeat scroll top right;
display: block;
float: left;
height: 32px; /* schimbati valoare in functie de inaltimea imaginii */
margin-right: 6px;
padding-right: 20px; /* in functie de latimea imaginii din dreapta */
/* Proprietati text */
text-decoration: none;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
a.button span {
/* Fundal imagine stanga */
background: transparent url('button_left.png') no-repeat;
display: block;
line-height: 22px; /* in functie de inaltimea butonului */
padding: 7px 0 5px 18px;
}
a.button:hover span{
text-decoration:underline;
}[/code]

Rezultatul va arata ca in imaginea de mai jos.

sliding_doors_example

Imagini

Am mai facut pentru voi cateva imagini pe care sa le puteti folosi impreuna cu scriptul de mai sus.

button_left_01button_right_01

button_left_02imageaxd

button_left_03button_right_03

button_left_04button_right_04

button_left_05button_right_05

button_left_06button_right_06

Usor nu? Spor la treaba!

]]> http://www.dmdesign.ro/html-si-css/creati-butoane-deosebite-folosind-css-si-metoda-sliding-doors.dmdesign/feed 0 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