Responsive Web-Css Kütüphaneleri

Responsive kelimesini uyumlu,esnek olarak çevirebiliriz.Hazırladığınız web içeriklerinin tüm cihazlarda düzgün şekilde çalışması için kullanabileceğiniz css kütüphanelerini bu yazıda paylaşıyorum.

Foundation 3

The most advanced responsive front-end framework in the world.

http://foundation.zurb.com/

foundation-framework1

 

 

 

 

 

 

 

Less Framework 4

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

http://lessframework.com/

images (4)

 

 

 

 

 

Frameless

Dig responsive design?Hate fluid grids? Try a Frameless grid.

http://framelessgrid.com/

responsive-css-framework-frameless

 

 

 

 

 

 

Amazium

Amazium is a CSS framework that handles the most tricky and time-consuming parts of creating responsive websites.

http://www.amazium.co.uk/

Amazium-CSS-Framework-For-Responsive-Sites-520x255

 

CSS3 transitions Nedir? Nasıl Kullanırız ?

CSS3 transitions Nedir? Nasıl Kullanırız ?

CSS3 Transitions

 

Transitions Türkçeye geçiş olarak çevrilmektedir.Transitions ile javascript veya flash kullanmadan efektler uygulayabiliriz.İnternet Explorer dışındaki tarayıcılar desteklemektedir.Diğer tarayıcılarda sorun olmaması için aşağıda tarayıcılara göre ekleri yazdım.

•Firefox 4 -moz-.
•Chrome ve Safari -webkit-.
•Opera  -o-.

Okumaya devam et

Fullscreen Slideshow With HTML5 Audio And Jquery

 

FULLSCREEN SLIDESHOW WITH HTML5 AUDIO AND JQUERY

 

In today’s tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to give life to the gallery and try to recreate the ambient of this vibrant city.

Okumaya devam et

Html5 Dersleri-Video Etiketi

Merhaba arkadaşlar bu derste Html5 Video etiketini inceleyeceğiz.Html5 ı destekleyen tarayıcılar :
TARAYICI                 MP4 WEBM OGG
Internet Explorer 9       Evet Hayır Hayır
Firefox 4.0                   Hayır Evet Evet
Google Chrome 6         Evet Evet Evet
Apple Safari 5              Evet Hayır Hayır
Opera 10.6                  Hayır Evet Evet

<!DOCTYPE html>
<html>
<body>
<video width=”320″ height=”240″ controls=”controls” autoplay=”autoplay”>
<source src=”ColinRobertson_2012.mp4″ type=”video/mp4″ />
Kullandığınız tarayıcı tarafından desteklenmiyor.
</video>
</body>
</html>

Kodumuz yukarıdaki gibidir.Chrome üzerinde çalıştırdığım için kodların çalışmasında bir hata almıyorum.Sitemizde bir video oynatacaksak kodumuzu düzenlememiz ve diğer formatları da eklememiz gerekecektir.Bu sayede hangi tarayıcıdan girildiği fark etmeden videomuz açılacaktır.

<source src=”movie.mp4″ type=”video/mp4″ />
<source src=”movie.ogg” type=”video/ogg” />
<source src=”movie.webm” type=”video/webm” />

Html5 Dersleri-Html5 Nedir

Html5

HTML 5 HTML dilinin son sürümüdür.Internet ExplorerMozilla Firefox ve Opera tarayıcılarının güncel sürümleri tarafından kısmen desteklenmektedir, Kısaca H5 Google Chrome ve Safari tarayıcılarının güncel sürümleri üzerinde, deneme aşamasında da olsa çok daha iyi bir şekilde çalışmaktadır. Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda kodlanırsa kodlansın, yine de fazladan yazılan kodların işlevselliği bozduğu bilinmektedir. Bu yüzden HTML 5 bu ihtiyaçları karşılamak adına geliştirilmeye başlanmıştır. Video paylaşım sitesi Youtube, deneme aşamasında HTML5′i kullanıcılarına sunmaktadır. Okumaya devam et

CSS Buttons with Pseudo-elements

cssbuttons_main

View demo Download source

Hola, amigos. For the last month or so, I’ve been experimenting with the power of CSS pseudo-elements, specially when it comes to mixing them with buttons and that way recreating some great effects that were only possible to do with sprites, in the past.

In this tutorial, I’ll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS.

The font used is ‘Open Sans’ by Steve Matteson.

http://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/