10 Cillop Css Taktiği

01 Nisan 2008 - 00:39 - Kategori: Genel -
Etikteler: |


Efendim son moda Css taktikleri bakmadan geçmeyin belki şöyle güzel bi' tanesini sitenizin bi köşesinde kullanıp bize hayır duası edersiniz.

Yuvarlak Köşeler (Grafik Kullanmadan)

yuvarlak-kose

PLAIN TEXT
HTML:
  1. <div id=”container”>
  2. <b class=”rtop”>
  3. <b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
  4. </b>
  5. <!–content goes here –>
  6. <b class=”rbottom”>
  7. <b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
  8. </b>
  9. </div>

PLAIN TEXT
CSS:
  1. .rtop, .rbottom{display:block}
  2. .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
  3. .r1{margin: 0 5px}
  4. .r2{margin: 0 3px}
  5. .r3{margin: 0 2px}
  6. .r4{margin: 0 1px; height: 2px}

Liste Stilleri

liste

PLAIN TEXT
HTML:
  3. <p>This is line one</p>
  4. </li>
  6. <p>Here is line two</p>
  7. </li>
  9. <p>And last line</p>
  10. </li>
  11. </ol>

PLAIN TEXT
CSS:
  1. ol {
  2. font: italic 1em Georgia, Times, serif;
  3. color: #999999;
  4. }ol p {
  5. font: normal .8em Arial, Helvetica, sans-serif;
  6. color: #000000;
  7. }

Tablosuz Formlar

form

PLAIN TEXT
HTML:
  2. <label for=”name”>Name</label>
  3. <input id=”name” name=”name”><br>
  4. <label for=”address”>Address</label>
  5. <input id=”address” name=”address”><br>
  6. <label for=”city”>City</label>
  7. <input id=”city” name=”city”><br>
  8. </form>

PLAIN TEXT
CSS:
  1. label,input {
  2. display: block;
  3. width: 150px;
  4. float: left;
  5. margin-bottom: 10px;
  6. }
  7.  
  8. label {
  9. text-align: right;
  10. width: 75px;
  11. padding-right: 20px;
  12. }
  13.  
  14. br {
  15. clear: left;
  16. }

Alıntı

alıntı

PLAIN TEXT
CSS:
  1. blockquote:first-letter {
  2. background: url(images/open-quote.gif) no-repeat left top;
  3. padding-left: 18px;
  4. font: italic 1.4em Georgia, “Times New Roman”, Times, serif;
  5. }

Graident Yazı Stili

gradient

PLAIN TEXT
HTML:
  1. <h1><span></span>CSS Gradient Text</h1>

PLAIN TEXT
CSS:
  1. h1 {
  2. font: bold 330%/100% “Lucida Grande”;
  3. position: relative;
  4. color: #464646;
  5. }
  6. h1 span {
  7. background: url(gradient.png) repeat-x;
  8. position: absolute;
  9. display: block;
  10. width: 100%;
  11. height: 31px;
  12. }
  13.  
  14. <!–[if lt IE 7]>
  15. <style>
  16. h1 span {
  17. background: none;
  18. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
  19. }
  20. </style>
  21. <![endif]–>

Dikey Hizalama

vertical

PLAIN TEXT
HTML:
  1. <p>İçerik</p>

PLAIN TEXT
CSS:
  1. div{
  2. height:100px;
  3. }
  4. div *{
  5. margin:0;
  6. }
  7. div p{
  8. line-height:100px;
  9. }

Yuvarlak Köşeler (Grafikli)

resimli-kutu.gif

PLAIN TEXT
HTML:
  1. <div class=”roundcont”>
  2. <div class=”roundtop”>
  3. <img src=”tl.gif” alt=”"
  4. width=”15″ height=”15″ class=”corner”
  5. style=”display: none” />
  6. </div>
  7.  
  8. KUTU KUTU PENSE
  9.  
  10. <div class=”roundbottom”>
  11. <img src=”bl.gif” alt=”"
  12. width=”15″ height=”15″ class=”corner”
  13. style=”display: none” />
  14. </div>
  15. </div>

PLAIN TEXT
CSS:
  1. .roundcont {
  2. width: 250px;
  3. background-color: #f90;
  4. color: #fff;
  5. }
  6.  
  7. .roundcont p {
  8. margin: 0 10px;
  9. }
  10.  
  11. .roundtop {
  12. background: url(tr.gif) no-repeat top right;
  13. }
  14.  
  15. .roundbottom {
  16. background: url(br.gif) no-repeat top right;
  17. }
  18.  
  19. img.corner {
  20. width: 15px;
  21. height: 15px;
  22. border: none;
  23. display: block !important;
  24. }

Çoklu Class Değeri

PLAIN TEXT
HTML:
  1. <img src=”image.gif” class=”class1 class2″ alt=”" />

PLAIN TEXT
CSS:
  1. .class1 { border:2px solid #666; }
  2. .class2 {
  3. padding:2px;
  4. background:#ff0;
  5. }

Yatay Hizalama

horisontal.gif

PLAIN TEXT
HTML:
  1. <div id=”container”></div>

PLAIN TEXT
CSS:
  1. #container {
  2. margin:0px auto;
  3. }

İlk Harfi Büyük Paragraf

drop.gif

PLAIN TEXT
HTML:
  1. <p class=”introduction”> This paragraph has the class “introduction”. If your browser supports the pseudo-class “first-letter”, the first letter will be a drop-cap. </p>

PLAIN TEXT
CSS:
  1. p.introduction:first-letter {
  2. font-size : 300%;
  3. font-weight : bold;
  4. float : left;
  5. width : 1em;
  6. }

EkleBunu Sosyal Paylaşım Butonu

« SMF kurtarma   |   Plus Diyor ki »