CSS min-width animasyon

Bağlantıyı al
Facebook
X
Pinterest
E-posta
Diğer Uygulamalar

Aralık 09, 2015

htmlvecssegitimi.blogspot.com

Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz.

KAYNAK KODLARI	SONUÇ EKRANI
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style> #kutu-1 { width: 300px; background-color: lightyellow; overflow: auto; border: 1px solid gray; -webkit-animation: animasyonismi 4s infinite; animation: animasyonismi 4s infinite; } @-webkit-keyframes animasyonismi { 50% {min-width: 300px;} } @keyframes animasyonismi { 50% {min-width: 300px;} } </style> </head> <body> <strong>css min-width animasyon örnek</strong> <br /> <div id="kutu-1"> <p>Bu kutunun minumum genişliği yoktur !</p> <p>Animasyon özelliğinde ise "300px" minumum genişlik tanımladık.</p> <p>Bu kutunun içine tek kelimede yazılsa "300px" genişliğinde olacaktır.</p> </div> <em style="color:red;">css min-width </em>özelliği HTML elementinin minumum genişliğini tanımlamak için kullanılır. <br /> <u style="color:blue;">min-width</u> özelliğinin animasyon özelliği vardır. <p style="color:green;"><b>Hatırlatma:</b> internet explorer 9 ve önceki versiyonları CSS animasyon özellikleri desteklemez !</p> </body> </html>

KAYNAK KODLARI

SONUÇ EKRANI

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <style>
    #kutu-1 {
        width: 300px;
        background-color: lightyellow;
        overflow: auto;
        border: 1px solid gray;
        -webkit-animation: animasyonismi 4s infinite; 
        animation: animasyonismi 4s infinite;
    }
    
    @-webkit-keyframes animasyonismi {
        50% {min-width: 300px;}
    }
    
    @keyframes animasyonismi {
        50% {min-width: 300px;}
    }
  </style>
</head>

<body>
  <strong>css min-width animasyon örnek</strong>
  <br />
  <div id="kutu-1">
    <p>Bu kutunun minumum genişliği yoktur !</p>
    <p>Animasyon özelliğinde ise "300px" minumum genişlik tanımladık.</p>
    <p>Bu kutunun içine tek kelimede yazılsa "300px" genişliğinde olacaktır.</p>
  </div>
  <em style="color:red;">css min-width </em>özelliği HTML elementinin minumum genişliğini tanımlamak için kullanılır.
  <br />
  <u style="color:blue;">min-width</u> özelliğinin animasyon özelliği vardır.
  <p style="color:green;"><b>Hatırlatma:</b> internet explorer 9 ve önceki versiyonları CSS animasyon özellikleri desteklemez !</p>
</body>

</html>

HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

css-dersleri

Bağlantıyı al
Facebook
X
Pinterest
E-posta
Diğer Uygulamalar

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Web Sitenizden Çok Para Kazanin

Temmuz 14, 2023

Web sitenizden daha fazla para kazanmanın yolları nı arıyorsanız, Adsterra gibi etkili bir reklam ağından faydalanabilirsiniz. Adsterra, bloglarınızda veya web sitelerinizde reklamlar yayınlayarak hızla para kazanmanızı sağlayan bir dizi avantaj sunmaktadır. Geçen yazımıda SEO içeriklerle web sitenizi arama motorlarınızda nasıl üst sıralara taşıyacağımızı anlatmıştık.Siz de web yayıncılık serüveninizde bloglarınızdan daha çok fazla trafik çekip takipçilerinizi ve trafiğinizi paraya dönüştürmek istiyorsanız bu yazı tam size göre. AdsTerra ile Bloğunuzdan Hemen para kazanmaya başlayın ! Adsterra'nın avantajlarından biri, anında reklam görüntülenme imkanıdır. Bir kez kayıt olduktan sonra, Adsterra'nın reklam ağına erişim sağlayarak bloglarınızda veya web sitelerinizde reklamların hemen yayınlanmasını sağlayabilirsiniz . Bu hızlı başlangıç, gelirinizi artırmanızı ve kazancınızı daha da büyütmenizi sağlar. Adsterra'nın sunduğu reklam çeşitliliği de dikkate değerdir. Kaps...

Devamı Oku »

YouTube reklamları nasıl engellenir

Kasım 11, 2020

YouTube Reklamlarını nasıl engellenir çok kolay Telefonunuzda ,bilgisayarınızda ,Androidte ve Iphone ceptelefonlarınızda YouTube reklamlarını kaldırmak için harika bir tarayıcı ve uygulama var . İnternet paketinizi yemez hızlı güvenilir ve aynı zamanda kullandıkça para kazandırır. Bakalım neymiş bu Harika Youtube reklam engelleyici.Para ödemeden Youtube reklamlarını engelleyebilceğiniz için şimdiden mutlu olun harika bir tarayıcı uygulama sizi bekliyor . Reklamsız YouTube gibi şeylere gidip te para vermeyin boş yere. Youtube reklamları nasıl engellenir ? Sordunuz hemen söyleyeyim Ya bilgisayarınıza reklam engelleyici tarayıcı indireceksiniz ya da mobil telefonunuza güzel bir uygulama indireceksiniz.Benim tavsiyem ise Chrome reklam engelleyici uzantısı kurmanızdansa hem bilgisayarınıza hemde Android IOS telefonunuzda YouTube reklam engelleyici harika bir uygulama tarayıcı indirmek. Acelem var hemen indirmek istiyorum diyorsa...

Devamı Oku »

Javascript Oyun Yapma Dersleri HTML5+CSS3

Temmuz 29, 2018

Javascript ile oyun nasıl yapılır, oyun nasıl programlanır öğrenmek ister misin ? Javascript class yapısı kullanarak nesne yönelimli modern kod yazımları ile sen de kendi oyununu çok kolay programlayabilirsin ve algoritma yeteneğin çok iyi gelişecek.

Devamı Oku »

Html dersleri

Şubat 03, 2021

Html dersleri ne kaldığımız yerden devam ediyoruz ve artık bir webmaster ya da kodyazarı olma yolunda adım adım ilerleyeceğiz.Bir önceki derste html konusunda basit bir başlangıç yapmıştık.Şimdi ise bir kaç hatırlatmayla kod editörlerini kullanarak ders anlatımına devam edeceğiz.Kodlama öğrenmek istiyorum mu demiştiniz? HTML' in açılımı H yper T ext M arkup L anguage yani Güçlü metin işaretleme dili de denebilir.Bu kelimeyi sıkça duyacağınız için açılımını bilmekte yarar var.İnternet sayfaları yapamamızı sağlayan bu dil ile en basit haliyle bir web siteyi aşağıdaki kodlamıştık. <html> <head> <title> Belge başlığı </title> </head> <body> <h1> İçerik Başlığı </h1> <p> Bir paragraf........ </p> <p> Bir başka paragraf........ </p> </body> </html> Şimdi ise yukarıda gördüğünüz kodları editörde çalıştırarak test edin.Eğer kendi kullana...

Devamı Oku »

İnternetten hangi alanlarda para kazanılır?-İnternetten para kazanmanın yolları

Temmuz 03, 2023

İnternetten para kazanmanın yolları İnternet, günümüzde pek çok kişi için hem bir eğlence hem de bir gelir kaynağıdır. İnternet üzerinden para kazanmak isteyenler için çeşitli seçenekler bulunmaktadır. Bu seçenekler arasında bazıları daha kolay, bazıları ise daha zor ve emek gerektiren yöntemlerdir. Bu yazıda, internetten para kazanmanın yollarını ve bunların avantajlarını ve dezavantajlarını sizler için anlatacağız. İnternetten hangi alanlarda para kazanılır? İnternetten para kazanmak isteyenler için birçok alan mevcuttur. Bunlardan bazıları şunlardır: Blog yazmak: Blog yazmak, internetten para kazanmanın en popüler yöntemlerinden biridir. Blog yazarak, ilgi duyduğunuz veya bilgi sahibi olduğunuz bir konu hakkında yazılar yayınlayabilir ve bunları okuyucularınızla paylaşabilirsiniz. Blog yazarak para kazanmanın yolları arasında reklam gelirleri, sponsorluklar, bağlı kuruluş pazarlaması, ürün satışı, e-kitap veya kurs oluşturma gibi seçenekler bulunmaktadır. Blog yazmanın avantajları a...

Devamı Oku »

İnternetten Para Kazanmanın Yolları -İnternetten Para Kazandıran Siteler -İnternetten Nasıl Para Kazanılır

Aralık 12, 2020

İnternetten Para Kazanmanın Yolları İnternetten Para Kazanmanın Yolları Nelerdir Hemen Öğren

Devamı Oku »

Html belgesi yapısını anlama uygulaması

Şubat 03, 2021

Html dersi uygulama örneğimizde html belgesinde temel etiketler ve kullanımını öğreneceğiz.Bu uygulama çok basit bir web sayfasının kodlarıdır.Sizlerde başlığı değiştirerek ya da paragraf etiketlerini değiştirerek kod yazmaya başlayabilirsiniz.Bir web sitesi yapmak için temel kurgu iyi bilinmelidir. <!DOCTYPE HTML> <html> <head> <title>Belge Başlığı</title> </head> <body> <h1>İçerik Başlığım</h1> <p>İlk paragrafım.....</p> </body> </html> Html belgesi uygulama videosu Bir html dökümanının uzantısı html'dir.Aşağıda izleyeceğiniz videoda sıfırdan html derslerine uygulamalarla başlamış olacağız.Videoyu izlemeden önce son hatırlatmaları yapalım. Doctype bildirimi ile tarayıcıya sitemizin html5 ile yapıldığını bildiriyoruz. Sitemiz html kodları içerisinde her elemanı kapsayan en önemli etikettir. Bizler kullanıcı olarak web sitelerinde sadece body kodları arası...

Devamı Oku »

HTML DOCTYPE Bildirimi

Eylül 21, 2015

HTML <!DOCTYPE> Bildirimi Örnek <!DOCTYPE> Bildirimi: < !DOCTYPE html > < html > < head > < title > Sayfanızın başlığı < /title > < /head > < body > Sayfanızın içeriği........ < /body > < /html > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI Sayfanızın başlığı Sayfanızın içeriği........ HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <!DOCTYPE> Tanımı ve Kullanımı HTML dökümanınızda <html> etiketinden önce, en başta olması gereken şey <!DOCTYPE> bildirimidir. <!DOCTYPE> bildirimi bi...

Devamı Oku »

HTML5 ile SEO Uyumlu İçerik Üret

Temmuz 10, 2023

Merhaba arkadaşlar , HTML5 ile SEO uyumlu içerik üretmek için yapabileceğiniz çok basit ama bir blog ve web site için çok önemli olan bir kaç şeyi size paylaşıyorum. HTML5 ile SEO Uyumlu İçerik Üret Başlık Etiketlerini Etkili Kullanın İçeriğinizi önemli anahtar kelimelerle vurgulamak için başlık etiketlerini (H1, H2, H3 vb.) kullanın. Anahtar kelimeleri bu başlık etiketlerinde yerleştirerek sayfanın yapısını anlamlı bir şekilde düzenleyin. İçeriğinizde başlık etiketlerini (H1, H2, H3 vb.) kullanarak sayfada hiyerarşi oluşturun. Ana başlık (H1) sadece bir kez kullanılmalı ve diğer başlık etiketleri (H2, H3 vb.) alt başlıklar için kullanılmalıdır. Meta Etiketlerini Kullanmayı Unutmayın Meta açıklama etiketini kullanarak sayfanın içeriğini özetleyin vemümkünse anahtar kelimelerinizin en azından bir tanesi meta açıklamada bulunsun. Anahtar kelimeleri de bu açıklamada kullanarak arama motorlarının içeriğinizi daha iyi anlamasını sağlayın. Ayrıca, her...

Devamı Oku »

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

Aralık 31, 2017

Merhaba arkadaşlar bu yazımda eski tarayıcılarda çalışmayan kodları nasıl gizleyebileceğimizi ve uzunca yazılan javascript kod satırlarını bölme yi öğreteceğim. Web tasarım ve kodlama dersleri adı altında başlatmış olduğum javascript dersleri makalelerimin hepsini okumanızı istiyorum ve sizler için hazırlanan uygulamaların hepsini dikkatle uygulayarak öğrenin.Bir önceki yazımda javascript ile neler yapılabilir konusunu işledim. Js de eski tarayıcılarda çalışma ve kod satırlarını gizleme Bazen web site yapmak istediğimizde hangi programlama dilini kullanırsak kullanalım kodlar uzayabiliyor bu gibi durumlarda javascript kodlarını bölerek alt satıra rahatlıkla geçişler yapabiliriz.Aşağıdaki örnekte javascript kodunu ters slash (\) ile bölerek rahatça kod yazımına devam edeceğiz.Örneği inceleyiniz. <!DOCTYPE HTML> <html lang="tr"> <head> <meta charset="UTF-8"> <title>Js ile kod satırını b...

Devamı Oku »

Bu Blogda Ara

Html5 , CSS3 ve Javascript Dersleri