• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this document? Why not share!

Html5 ve css3 ile yaprak menü

on

  • 605 views

Html5 ve css3 ile yaprak menü

Html5 ve css3 ile yaprak menü

Statistics

Views

Total Views
605
Views on SlideShare
605
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html5 ve css3 ile yaprak menü Html5 ve css3 ile yaprak menü Document Transcript

    • Adobewordpress.com / Ta sa rım Unsurla rı / CSS3 / HTML5 ve CSS3 ile Ya pra k Menü HTML5 ve CSS3 ile Yaprak Menü Vatanay Özbeyli tarafından 29 Mayıs 2013 tarihinde yazıldı. ~ 1 Yorum + Değiştir CSS’in transition efektleriyle ilgili bir çok çalışma yaptık. Fiziksel efektlerinden de rotate ve bluru daha önce birkaç kez kullandık. Hadi gelin hem o bilgileri pekiştirelim hem de gayet şık bir menü tasarımı yapalım. Ama öncesinde aşağıdaki örnek .GIF dosyasını görüntülemenizde fayda var. Ya da canlı test etmek isteyebilirsiniz : Başlayalım HTML5′in nav tagı ile başlıyoruz. HTML kodlarımız aşağıdaki şekilde : 1 <nav> 2 <ulclass="top-menu"> 3 <li><atarget="_blank" href=http://www.adobewordpress.com/>Giriş</a><div class="menu-item"id="Giriş"></div></li> 4 <li><atarget="_blank" href=http://www.adobewordpress.com/wordpress/>WordPress</ <divclass="menu-item"id="WordPress"></div></li> 5 <li><atarget="_blank" href=http://www.adobewordpress.com/photoshop/>Photoshop</ <divclass="menu-item"id="Photoshop"></div></li> 6 <li><atarget="_blank" href=http://www.adobewordpress.com/tasarim- unsurlari/html5-tasarim-unsurlari/>HTML5</a><div class="menu-item"id="HTML5"></div></li> 7 <li><atarget="_blank" href=http://www.adobewordpress.com/tasarim- unsurlari/css/>CSS3</a><divclass="menu-item" id="CSS3"></div></li> 8 </ul>
    • Sırada CSS kodlarımız var. 9 </nav> 1 #Giriş{background:#9f4040;} 2 #WordPress{background:#7a9f40;} 3 #Photoshop{background:#b03c99;} 4 #HTML5{background:#9f8340;} 5 #CSS3{background:#40719f;} 6 7 nav{margin:0auto;width:600px;margin-top:100px;} 8 9 .top-menuli{ 10 -webkit-filter:blur(1px);-moz-filter:blur(1px); 11 -o-filter:blur(1px);-ms-filter:blur(1px); 12 filter:blur(1px); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius= 13 14 font-family:Arial,sans-serif; 15 display:inline-block; 16 text-align:center; 17 margin:30px5px; 18 position:relative; 19 -webkit-transition:all0.6sease; 20 -moz-transition:all0.6sease; 21 -o-transition:all0.6sease; 22 } 23 .top-menuli:hover{ 24 -webkit-filter:blur(0px);-moz-filter:blur(0px); 25 -o-filter:blur(0px);-ms-filter:blur(0px); 26 filter:blur(0px); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius= 27 margin:30px20px; 28 } 29 .top-menuli:active{ 30 margin:30px33px; 31 } 32 .top-menulia { 33 width:80px; 34 height:80px; 35 z-index:9999; 36 position:absolute; 37 top:32px; 38 font-weight:bold; 39 display:block; 40 text-decoration:none; 41 font-size:12px; 42 color:#fff; 43 text-shadow:0px1px1pxrgba(0,0,0,0.4),0px4px6px rgba(0,0,0,0.1),0px9px11pxrgba(0,0,0,0.1); 44 -webkit-transition:all0.1slinear; 45 -moz-transition:all0.1slinear; 46 -o-transition:all0.1slinear; 47 48 } 49 .top-menuli:activea{ 50 font-size:16px; 51 top:30px; 52 text-shadow:none; 53 } 54 .top-menulidiv.menu-item{ 55 width:80px; 56 height:80px; 57 display:block;
    • Kapanış Özellikle CSS3 elementlerini kullandığımız daha birçok tasarım hazırlayacağız. Menünün üzerine gelindiğinde bulanıklık kalkmakta fark ettiğiniz gibi. Fakat performans veya görsel açıdan bu efekti beğenmeyen olabilir. Dolayısıyla bluru kaldırmak isteyenler şu satırları silmeli : 10, 11, 12, 24, 25, 26. Silmeye alttan başlarsanız satırlar kaymadığı için problem yaşamazsınız. İyi çalışmalar. Benzer Konular: CSS ile Toogle Menü Sadece CSS ile Yatay Menü Web Sayfanıza Etkileyici Giriş Paneli 58 -webkit-transition:all0.6sease; 59 -moz-transition:all0.6sease; 60 -o-transition:all0.6sease; 61 -webkit-border-top-left-radius:100px; 62 -webkit-border-bottom-right-radius:100px; 63 -moz-border-radius-topleft:100px; 64 -moz-border-radius-bottomright:100px; 65 border-top-left-radius:100px; 66 border-bottom-right-radius:100px; 67 -webkit-transform:rotate(45deg); 68 -moz-transform:rotate(45deg); 69 -o-transform:rotate(45deg); 70 } 71 .top-menuli:hoverdiv.menu-item{ 72 -webkit-border-top-left-radius:80px; 73 -webkit-border-bottom-right-radius:80px; 74 -moz-border-radius-topleft:80px; 75 -moz-border-radius-bottomright:80px; 76 border-top-left-radius:80px; 77 border-bottom-right-radius:80px; 78 -webkit-transform:rotate(225deg); 79 -moz-transform:rotate(225deg); 80 -o-transform:rotate(225deg); 81 } 82 .top-menuli:activediv.menu-item{ 83 -webkit-border-top-left-radius:50px; 84 -webkit-border-bottom-right-radius:50px; 85 -moz-border-radius-topleft:50px; 86 -moz-border-radius-bottomright:50px; 87 border-top-left-radius:50px; 88 border-bottom-right-radius:50px; 89 90 }
    • CSS ile Etkileyici Gölge Efektleri CSS3 Şekiller Yazı Kategorisi : CSS3 , HTML5 , Tasarım Unsurları Anahtar Kelimeler : blur , CSS3 , design , geçiş , html5 , leaf , menu , rotate , transition