Haftaya ilham kaynakları ile başlıyoruz.
İşte bu hafta sizin için seçtiğimiz şık çalışmalar.
Kullanılan tüm görseller sahiplerine aittir. Eklenmiş başlıklar, ilgili görsellerin sahiplerini belirtmektedir. Tüm haftalık ilham kaynakları paylaşımlarını buradan görüntüleyebilirsiniz.
Triangle Bootstrap ile hazırlanmış, üçgenlerden oluşmuş şık bir tasarım. Renkli ve minimal ekranlardan oluşan Triangle toplam 44 alt sayfa ile birlikte ücretsiz olarak geliyor.
Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.
Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.
Haftaya ilham kaynakları ile başlıyoruz.
İşte bu hafta sizin için seçtiğimiz şık çalışmalar.
Kullanılan tüm görseller sahiplerine aittir. Eklenmiş başlıklar, ilgili görsellerin sahiplerini belirtmektedir. Tüm haftalık ilham kaynakları paylaşımlarını buradan görüntüleyebilirsiniz.
Bu dersimizde Photoshop ile resimler üzerine ekleyeceğimiz 3 boyutlu cam cisimler sayesinde şık duvar kağıtları hazırlayacağız.
İyi çalışmalar.
Starnight, HTML5 ve CSS3 ile hazırlanmış şık bir web temasıdır. Özellikle tasarımcı tarafından kullanılan renkler çok ilgi çekici. Minimal yapıdaki tasarım Bootstrap kütüphanesi sayesinde tam anlamıyla da responsive.
Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.
Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.
Özellikle haber sitelerinin vazgeçilmez öğesi olan akan anons pencereleri sizlere hem dinamik hem de kullanşlı bir sunum imkanı sağlıyor. Bu yapıları sizler de web sitenize kolayca eklemeniz için Adobewordpress ailesi olarak awNotices’i hazırladık.
HTML5, CSS3 ve jQuery ile hazırlanmış yapı ikon desteği için de Font Awesome’ı kullanmakta. Flat yapıdaki tasarım, değiştirilebilir renk ve icon seçenekleriyle kolay kullanım ve şık tasarımı bir arada sunuyor.
awNotices’in çalışan ve basit örneğini indirmek için aşağıdaki linki kullanabilirsiniz.
awNotices/
├── test.html
├── css/
│ ├── awNotices.min.css
│ ├── awNotices.css
└── js/
├── awNotices.min.js
└── awNotices.js
awNotices’in örnek versiyonunu indirmek için.
awNotices’i aktif kılmak için yapmanız gereken tek şey .awNotices classını barındıran bir yapıya link halinde başlıkları girmek. Gerisi kendiliğinden çalışacaktır. Hadi gelin örnek bir yapı oluşturalım.
<section class="awNotices">
<a notice-color="orange" href="http://adobewordpress.com"><i class="fa fa-bell"></i> Duyuru 1</a>
<a notice-color="red"><i class="fa fa-heart"></i> Duyuru 2</a>
<a notice-color="blue"><i class="fa fa-desktop"></i> Duyuru 3</a>
</section>
Renk tanımları ve diğerleri için birkaç satır CSS kodu yazmamız gerekiyor. Hazırladığımız örnek Font Awesome‘ın ikonlarını kullandık. Eğer Font Awesome hakkında detaylı bilgi almak isterseniz burayı tıklayın.
Bu ikonları direkt olarak CDN üzerinden sitenize eklemek için de aşağıdaki kodu kullanabilirsiniz.
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
Sırada awNotices’in ihtiyaç duyduğu CSS kodlarını oluşturmak var.
.awNotices
position:relative;
color:white;
font:400 12px Arial;
.awNotices a
padding:8px 25px 8px 10px;
position:absolute;
left:0;right:0;
opacity:0;
color:inherit;
text-decoration:none;
visibility:hidden;
transition:opacity .6s;
border-radius:3px;
text-shadow:0 0 3px rgba(1,1,1,.3);
line-height:150%;
.awNotices a[notice-color="orange"]background-color:#ff9800
.awNotices a[notice-color="red"]background-color:#e51c23
.awNotices a[notice-color="blue"]background-color:#3f51b5
.awNotices a[notice-color="green"]background-color:#8bc34a
.awNotices a[notice-color="dark"]background-color:#414141
.awNotices a.active
opacity:1;
visibility:visible;
.awNotices a i.fa
padding-right:8px;
margin-right:5px;
border-right:1px solid rgba(255,255,255,.2);
.awNotices span.controller
position:absolute;
cursor:pointer;
background:transparent;
right: 0;
padding:8px 10px;
line-height:150%;
Son olarak fonksiyonalite için jQuery kodlarımızı ekleyelim.
Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
İlk olarak durdur/oynat butonunu, sonrasında da tetikleyici classımızı ekleyelim.
$('.awNotices').append('<span class="controller fa fa-pause"></span>');
$('.awNotices a:nth-of-type(1)').addClass('active');
Slider şeklinde çalışan yapıyı aktif kılacak ilk fonksiyonumuzu yazalım.
function awNotice()
if(!$('.awNotices').hasClass('stopped'))
var $active = $('.awNotices a.active');
var $next = $active.next('a');
if ($next.length)
$next.addClass('active');
$active.removeClass('active');
else
$active.removeClass('active');
$('.awNotices a:first-of-type').addClass('active');
Artık durdur/oynat butonunun arkasını doldurabilirsiniz. Beraberinde de çalıştırıcı tanımımızı yapalım.
$('.awNotices .controller').click(function()
$(this).toggleClass('fa-pause fa-play');
$('.awNotices').toggleClass('stopped');
)
function awNotices(timer)
setInterval( "awNotice()", timer);
Bu kadar. Web sayfanıza eklemeniz gereken tek JavaScript kodu aşağıdaki olacaktır.
awNotices(4500);
Bu kod her 4.5 saniyede bir değişen haber akışını çalışır kılar.
awNotices gelişmiş bir news ticker eklentisidir. Ancak önerilerinizle şekil almaya devam edecektir. Bu konu altında önerilerinizi paylaşabilirsiniz.
Haftaya ilham kaynakları ile başlıyoruz.
İşte bu hafta sizin için seçtiğimiz şık çalışmalar.
Kullanılan tüm görseller sahiplerine aittir. Eklenmiş başlıklar, ilgili görsellerin sahiplerini belirtmektedir. Tüm haftalık ilham kaynakları paylaşımlarını buradan görüntüleyebilirsiniz.7
Bu dersimizde Photoshop kullanarak güneş gözlüğüne yansıma efekti uygulayacağız.
İyi çalışmalar.
Önceleri sadece rötuşun bir parçası olan CSS artık yeni tanımlamaları sayesinde fonksiyoneliteyi de beraberinde getiriyor.
CSS gelişimini sürdüredursun, gelin bizler de 15 soruda CSS bilgimizi hızlıca sınıyalım.
Bu sınav kolay, orta ve zor seviyede hazırlanmış 15 soruda sizin CSS bilginizi sınar. Kısa ve eğlendirici bir sınavdır, profesyonel anlamda bir kontrol içermediği için sonuçlar fazlasıyla ciddiye alınmamalıdır.
Adobewordpress‘in size hazırladığı bu küçük sınavla CSS bilginizi test etmek ister misiniz?
| Posizyon | İsim | Buradan girildi | Puan | Sonuç |
|---|---|---|---|---|
| Tablo yükleniyor | ||||
Gretong, Bootstrap ile oluşturulmuş responsive yapıdaki bir HTML5 alışveriş sitesi taslağıdır. Flat yapıdaki tasarım, barındırdığı renk karşıtlığıyla ve sade yapısıyla birleşince ortaya seçkin ve kalite kokan bir arayüz çıkmakta.
Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.
Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.
Haftaya ilham kaynakları ile başlıyoruz.
İşte bu hafta sizin için seçtiğimiz şık çalışmalar.
Kullanılan tüm görseller sahiplerine aittir. Eklenmiş başlıklar, ilgili görsellerin sahiplerini belirtmektedir. Tüm haftalık ilham kaynakları paylaşımlarını buradan görüntüleyebilirsiniz.7
Bootstrap üzerine konuşmaya devam ediyoruz. Bugün Bootstrap Slider‘ı (bilinen adıyla Carousel) Ambilight tasarımıyla özgün ve şık hale getireceğiz. Oluşturacağımız yenilikçi tasarım, Bootstrap varolan işlevsel sliderını bir adım daha öteye taşıyacak.
Bootstrap Slider kullanımı gayet basit olan, tasarımının bootstrap.css ile, fonksiyonelitesinin de bootstrap.js ile işlediği yapıdır. Eğer bu CSS ve JS dosyalarına sahip değilseniz sizi birinci adıma, Bootstrap’e giriş dersimize alalım.
Tasarımımıza ilham veren teknolojiyi kısaca tanıyalım.
Ambilight (ambient lighting), ambiyans veya ortam aydınlatması şeklinde dilimize çevrilebilir. Televizyon sektöründe kullanılan bu tanım, izlemekte olduğumuz görüntünün, cihazın arkasındaki ışık panelleriyle duvara yansıtılmasına deniyor. Günümüzde, televizyon sektörünün önde gelen firmaları birer birer Ambilight modellerini piyasaya sürmekte. Örnek video için buraya bakabilirsiniz.
Yapacağımız tasarımın örneği yukarıda yerini aladursun, biz kodlarımızı yazmaya başlayalım. Önceden de belirttiğimiz gibi Bootstrap’in kendi CSS ve JS dosyalarını yüklüyoruz, yine Bootstrap’in resmi sitesindeki Carousel kodlarını kullanarak bir slider oluşturuyoruz.
HTML kodlarımıza sadece awSlider classına sahip bir section ekleyelim. Bu da yapının, sitedeki diğer sliderları değiştirmesini engelleyecek filtreyi oluşturacak.
<section class="awSlider">
<div class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target=".carousel" data-slide-to="0" class="active"></li>
<li data-target=".carousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="resim1.jpg">
<div class="carousel-caption">Görsel #1</div>
</div>
<div class="item">
<img src="resim12.jpg">
<div class="carousel-caption">Görsel #2</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href=".carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Geri</span>
</a>
<a class="right carousel-control" href=".carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">İleri</span>
</a>
</div>
</section>
Ek olarak belirttiğimiz section‘a özgü kodlarımızı hazırlayalım. İlk olarak carousel’i tablo yapısına çevirip gölge ile saralım.
section.awSlider .carousel
display:table;
z-index:2;
-moz-box-shadow: 0 0 4px #444;
-webkit-box-shadow: 0 0 4px #444;
box-shadow: 0 0 15px rgba(1,1,1,.5);
Daha sonra resimlerin seçilip sürüklenmesini de engelleyen filtremizi, awSlider’ı tasarlayalım.
section.awSlider
margin:30px auto;
padding:30px;
position:relative;
display:table;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Şimdi awSlider içerisindeki resimleri yönetelim. Burada hazırladığımız absolute img elemanları arkaplandaki bulanık yapıyı oluşturacaklar.
section.awSlider:hover > img
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity:1;
section.awSlider img
pointer-events: none;
section.awSlider > img
position:absolute;
top:30px;
z-index:1;
transition:all .3s;
filter: blur(1.8vw);
-webkit-filter: blur(2vw);
-moz-filter: blur(2vw);
-o-filter: blur(2vw);
-ms-filter: blur(2vw);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
opacity:.5;
Geriye son olarak Slider’ı özgünleştiren, arkaplandaki ambilight görüntüsünü oluşturup sürekli kılan jQuery kodları kaldı. İlk olarak sliderı tanımlayalım. Üzerine gelindiğinde durmasını ve her iki saniyede bir görüntü değişmesini belirliyoruz.
$('section.awSlider .carousel').carousel(
pause: "hover",
interval: 2000
);
Şimdi ilk görselin arkaplanındaki ambilight ile başlayalım.
var startImage = $('section.awSlider .item.active > img').attr('src');
$('section.awSlider').append('<img src="' + startImage + '">');
Geriye kalan tüm görselleri de okuyup onlara da özgü ambilight effect oluşturalım.
$('section.awSlider .carousel').on('slid.bs.carousel', function ()
var bscn = $(this).find('.item.active > img').attr('src');
$('section.awSlider > img').attr('src',bscn);
);
Bu kez fiziksel bir tasarım teknolojisi verdiği ilham ile kendine bir web sliderı üzerinde yer buluyor. Bu tip etkileşimler tasarımın tüm dallarını birbirine bağlayan en güçlü yapılar olmakla beraber, trendlerin her alanda, aynı anda yer bulmasına sebepler.
Ambilight teknolojisini bizlere kazandıran mühendisler, bu yenilikçi tasarımlarıyla daha birçok farklı yapıya ilham vermeye devam edeceklerdir.
İyi çalışmalar.
The Lab, w3layouts tarafından yayınlamış flat yapıdaki bir web taslağıdır. Bootstrap iskeletini barındıran bu şık tasarım HTML5 ve CSS3’in hünerleri sayesinde oluşturulmuştur.
Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.
Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.
Haftaya ilham kaynakları ile başlıyoruz.
İşte bu hafta sizin için seçtiğimiz şık çalışmalar.
Kullanılan tüm görseller sahiplerine aittir. Eklenmiş başlıklar, ilgili görsellerin sahiplerini belirtmektedir. Tüm haftalık ilham kaynakları paylaşımlarını buradan görüntüleyebilirsiniz.7
