2 NİSAN 2013, Salı

Css3 Radyal Degrade Arka Plan Parametreleri Öğretici Radyal Gradyan

CSS içine öğretici oluşturmak için parametreleri üzerinde olacak Radyo degrade ve yinelenen radyal degrade arka HTML elemanları için çıplak kemikleri tekrar başlayacak kafamda bir html5 web belgesi var eleman Ben onun sıkı metin / css başlayacak stil öğesi yapmak ediyorum Eğer bir çift satır aşağı gitmek emin olun ve sadece gibi stil öğesi kapalı bizim Biz eklemek için gidiyoruz doğrusal degrade öğretici 9 vücuda unsurları önem verdiklerini ve her biri farklı bir sınıf var Şimdi izin degrade 9 ile bir gradyan en hızlı bir şekilde CSS kuralı eklemek yani tüm madeni etkileyecek gidiyor CSS gel

işmeyi hedefleyerek Bu yüzden onları yapmak için bu şekilde bu yemekleri kadar stili olacak yüzer: ekran boyunca kötü yüzde 32 var sol uzakta üç kutu tarayıcı penceresinde uyacak ne kadar geniş bir tarayıcı penc

eresi 125 piksel marjı yüksek, her kutu seviyesi Dört piksel fontcolor boyutu en az 30 piksel kadar beyaz olacak Bu kutuların her biri için arka planda bir açık gri olacak Onlara bir degrade arka plan v

“Ders Kodu: http://www.developphp.com/video/CSS/Radial-Gradient-Background-Tutorial CSS3 radyal degrade () ve HTML elemanları için ayarı arka plan olarak kullanıla...”
Adam Khoury

ermek kadar Böylece biz sadece daraltmak ve yolumdan almak olduğunu yapabilir tamam sonraki satırda aşağı bu yorumu yerleştirebilirsiniz kendiniz için radyal degrade sözdizimi yerleştirmek ve sonra hücreye bir hatırlatma olarak bu sırayla bu parametreleri yerleştirebilirsiniz pozisyon şekil veya büyüklük ve ardından Kolej durur size tüm renklerini ve durur aşk koymak nerede var virgülle ayrılmış ve eğlenmek W renkler size boyutunu şekillendirme tı

Css3 Radyal Degrade Arka Plan Parametreleri Öğretici Radyal Gradyan Resim 1 Css3 Radyal Degrade Arka Plan Parametreleri Öğretici Radyal Gradyan Resim 2 Css3 Radyal Degrade Arka Plan Parametreleri Öğretici Radyal Gradyan Resim 3 Css3 Radyal Degrade Arka Plan Parametreleri Öğretici Radyal Gradyan Resim 4

klayın ve size şekil ve büyüklükte önce gider bir pozisyon belirtmek istiyorsanız en kolay yolu SOCO pozisyonu şekil veya büyüklük ve üniversite durakları Bence bunu düşünmek ve aynı zamanda pozisyon için hakkında konuşuyor olacak bazı anahtar kelimeleri var Biz çocuklar radyal degrade kullanarak olacak değiliz Biz önek kullanarak yaparken sözdizimi tüm tarayıcılarda standartlaştırılmıştır Biz bu anahtar kelimeler herhangi birini kullanmak için gitmiyoruz ama biz sadece numaralarını kullanabilirsiniz ve alt koymak üst

hakkı ve tüm bu anahtar kelimeleri sol Biz olması gereken degrade degrade başlangıç şimdi Şimdi bu ilk kutu degrade bir tür Hindistan hedef izin nokta, sınıf degrade belirtmek için yakın kaşlı ayraç tayin edecek tek açık kaşlı ayraç Eğer vereceğini nereye arka plan özelliği ve bu sizin Orada vergi oranı radyal degrade ve daha sonra koyun noktalı virgül Şimdi Sadece parantez içinde böyle şeyler kaldırmak izin ve en farklı tarayıcılar için önekleri hakkında konuşalım Ben Google Chrome'u test olacağım beri WebKit kullanmak için gidiyorum önek ayrıca Safari için kullanımı öneki Internet Explorer'da test ediyorsanız, yıl ms koymak Eğer test ediyoruz ve opera oh onlar henüz test konum eğer Mozilla Firefox ve bizim örnekleriyle halletmek sonra sonra benler vardı olabilir eklemek için gidiyoruz önek tüm bu yüzden çok yakında tüm tarayıcılarda çalışır ancak muhtemelen kullanmak mümkün olacak, diğer videoda sözü önek olmadan herhangi böyle metinde radyal degrade ve bazı tarayıcılar bu sadece böyle olduğunu gibi verecek ama ben tavsiye ederim Eğer artık sadece bir süre için önekleri kullanmak artık emin olabiliriz vermek tüm tarayıcılarda çalışır tamam bu yüzden geri sitemizde öneki etmesine izin vermedi ve bok cinayetlere caydırıcı arasındaki denizler bizim parametreleri vardı ve biz sadece kalacaksın iki renk sadece çok temel bir radyal degrade göstermek böylece macenta yazın edelim yazdığınız istediğiniz herhangi bir renk veya pembe ve mavi koyabilirsiniz ne olursa olsun ve siyah Şimdi bu biz test ediyoruz tarayıcıda kılan bir göz atalım Bazı kutu tek bir radyal degrade macenta yankıları olsun Ben niçin siyah nedenle bu kutular sana göstermek istiyorum yani esnektir Çocuklar bazı şeyler de şekil up box olup olmadığını belirleyecek degrade almak mümkün veya dairesel olacak Ayrıca zorlayabilirsiniz belirlenmiş olabilir dairesel ve ben bu yüzden bile, ikinci bir bu bahsedeceğiz onun senin kutuları şekil başlatmak bile dairesel olacak dedi eğer kutu kare bu ayarda bile eğer o yolu Şimdi dairesel en bu nedenlerden gerçek hızlı eflatun bahsedelim edeceğiz Sadece Doğrusal degradeler gibi kullanabilirsiniz Renkler onaltılık ve siyah için hatta aynı Ayrıca kullanabilirsiniz Eğer onaltılık üniversiteyi kullanabilirsiniz RGB HSL veya RGBA veya HS LA nedenle kırmızı gibi ada göre renkleri kullanabilirsiniz ya da onaltılık değerini kullanabilir veya RGB değeri kullanabilirsiniz ya siz bana bir soru sordu ve çok yapmak şimdi ne o HSL değerini kullanabilirsiniz renkleri bir çıkış şeffaflık konusunda ayarlar burada da şeffaf kelimeyi kullanabilir o neye benzediğini yüzden oa tam şeffaf renk yapmak FB tarayıcınızın görünümünü yenilemek biz almak onu görmek şeffaf renk onların belki dat tam saydam istemiyorum belki de sadece yarısı şeffaf yüzde 50 şeffaflık istiyor Burada tamam biz sana Doğrusal degradeler için koymak çok son video vardır bu adamlardan biri kullanıcıdan sormak soru bizi izlemeye devam edin lütfen Eğer bir yerde çıkış değerlerini kullanabilirsiniz 0 çok serin şeffaf veya opak ve yukarı bu burada cevap vermek istiyorum soru evet RGB a kullanabilir ya edebilirsiniz LA Colors artık HSL renk olarak H Bizim CSS3 yeni bir RGBA inanıyorum veya RGB renkleri her zaman kırmızı, yeşil, mavi renk değerlerini kullanabilirsiniz civarında olmuştur istediğiniz herhangi bir renk elde etmek ve aynı zamanda kuvvet parametresi koyabilirsiniz ayarı için dışarı yanlısıdır CA renk yedekleyin onun yumurtadan vardı döken, böylece şeffaflık istediğiniz ya da herhangi bir saydamlık İstediğiniz ayarı eğer Eğer sadece biraz şeffaf, neredeyse tüm yol yapabilirsiniz şeffaf ya da yüzde 50 size HSL kullanabilirsiniz, böylece Bir ya da bir renk değerlerini RGB Eğer şeffaf anahtar kelime kullanmak istemiyorsanız dökülme için out almak şimdi tamamen opak yapmak için en bütün bu CSS kuralını kopya izin M geri dönmek için bir misyon degrade kutusu için bir tane eklemek benim Ben Eflatun sonra siyah arasındaki başka bir renk katmak ediyorum renkleri isim turkuaz ve emin değilim virgül ile tüm Mike renkleri ayrı yapmak bana ben doğru turkuaz yazıldığından emin olalım ya da herhangi bir sonuç almazsınız tarayıcıda teslim Ben sarı istiyorum orada başka bir renk ekleyebilirsiniz ne olur edeceğiz, her renk uzayı nispeten eşit miktarda alacak olan Ben o şimdi ayarlama hakkında konuşacağım üç renk ile basit oğlum tutmak en Şunu alayım yani şekil am önünde yeni bir kural degrade 3 ve sağa yapacak Biz anahtar kelimeler daire ve varsayılan olarak koymak için gidiyoruz Eğer öyle olacak bir daire olması belirlenmiş yoksa eliptik senin şekli izin verirse bunu ön daire anahtar kelime koymak olmak şekli ve bir kaç kuvveti o belirten bir daire olmak bu tarayıcı C & C gelen kutusu hale daire anahtar sözcüğünü kullanarak ve eliptik değil mark Sokak olursa olsun kutunun boyutu kalır Dairesel da degrade nasıl büyür fark Daha geniş kutu kitleri tamam şimdi Biraz konumlandırma hakkında konuşalım ve biz sizin şeklini veya boyutunu belirtin Tron içinde şekil giderdim Eğer konumlandırma önünde sağ nereye koyduğunuzu işte yani kural onun kopya zayıf degrade olarak adlandırılan başka biri yapmak Biz daire belirtmek önce bu bir doğru yapacağız konumunu belirlemek konum ve ben alttan başladı yapacağız bu yüzden sadece alt anahtar olduğunu hale koyabilirsiniz çok alt kenarında başlar ben degrade onları görebiliyorum ve daha sonra en bunu alalım tamam şimdi oradan yayılır degrade tarafı için bir tane yapmak ve en bahsedelim köşelerine yerleştirerek o yüzden ben olmak istedim diyelim Sol alt köşede, benim degrade şimdi işlemek Ayrıca dik kullanabileceğiniz sol alt köşesinde başlayacak Bir üst sol alt sağ alt sol ancak köşede tam olmasını istemiyorum bir zaman olabilir belki bu degrade her yerde başlamak istiyorum Bunu başlamak istedim kutuya biz konumlandırma kullanabilirsiniz nerede Piksel Bunun yerine East kullanarak veya yüzde Sağ üst sol alt tuşu şimdi ben Tamam çalıştı farklı bir şekilde olacak göstermek istiyorum etkilemek t şeklinde ya da boyut ve pozisyon onun kopya Bu kural gradyan 5 yüzden ve en gradyan 6 kural yapalım şimdi kaldırılır sağ üst merkezini hedef edelim yüzde 50 Space yüzde elli diyerek ve bunun yerine titremesini daire kullanarak Biz boyutu numaraları kullanmak için gidiyoruz Nabil ayrıca bir daire ya da isterseniz bir elips almak için izin yani örnek uğruna ben sadece bunu 100 piksel kazanacağız ediyorum Şimdi 100 piksel teslim tarafından bu içine degrade kutusu 6 şimdi en boyutlandırma için bu numaraları atalım Biz 100 onun gözleri nasıl en bu ne olur yapalım bakın ve sonra sayfa kutuya 6 göz tutmak yenileme Eğer bütün degrade çok küçük olsun görmek şimdi biz 200 hafta yaparsanız neler ve yüksekliği sayfanızı yenileyin ve güzel bir büyük degrade var Şimdi bu bir daire olacak bu yüzden yerine orada kelime daire olması için onu zorlar Ben sadece ben kazandı kesin sayılar koymak ve olabilir bu numaraları maç ise Ben bu bir 100 ve bu bir yaparsanız mükemmel bir daire olacak sadece 50 alırım ve lale olacak korkunç Gördüğünüz şeklinde yine tüm yüksekliği nedeniyle şekillendirecek Bunu değiştirirseniz 250 dedi okunur 220 değişim bakın daha da dramatik olacak sıska bir otobüs 100 piksel ve 100 piksel üzerine dışarıda bırakır yani şimdi bu hangi gün ve degrade yüksekliği kadar biliyorum ve onun konumlandırma yani elli yüzde elli yüzde ki ben bunu değiştirmek eğer şimdi ne merkezde doğrudan 50, ilk 50-80 ve o-x koordinatı benim olacak benim yatay düzlem olur yani bu şeyi giymek olur dinlenme ne izle Seni görmek için yenileme Benim yatay bir düzlem üzerinde bu şekilde sadece o 2-0 dedi Ben bunu söylediğim eğer öyleyse bu kenarına şekerleme var belki yüzde 10, bu kaydedebilir ve daha sonra bunu göreceksiniz bu sayfayı yenileyin kutunun içine hiç bu kadar biraz bu kenarı dökülmek biraz daha Eğer koymak izin bkz yenileme Bu iki numaralarını kullanarak bu kutuda istediğini her yerde o İsterseniz bkz yüzdeler kullanabilir veya pikseli kullanabilirsiniz Ben isteseydim 50 piksel fuar olma ve daha sonra 100 piksel y konumu Şimdi o yüzden bu sayfayı yenileyin yapabilir bu şekilde 50 ve 100 oturmuş Bu şekilde 100 ve 50 50 X 100Y yüzden bu bir yerde burada oturan bir ay olmak istiyorum biz sadece koymak istiyorum ben başarmak çok kolay olacak X belki yüzde yetmişi ve sonra neden belki yirmi Sony Çin bu yüzden yetmiş ve 20 benim sayfayı yenileyin Bir sahnede bir film olacak gibi şimdi köşede burada olduğunu görmek Böyle henüz istediğiniz herhangi bir yere konumlandırmak ve bu da bazı anahtar kelimeler gibi uzak köşe düzeyi de konumlandırmak için izin ancak bu numaraları ve bu anahtar kelimeler kullanabilirsiniz: Eğer herhangi bir devamıdır sayfasını almak için izin verecektir Eğer burada sarmal kullanamazsınız veya daire anahtar Belirtilen şekilli veya şekilli belirtebilirsiniz numaraları ile doğru boyutlandırma biz onlar size vermek farklı seçenekler bir sürü var Farklı seçenekler çok tamam şimdi ben sadece kopya bulacağız kulüpler bu 1 durur rengini yerleştirerek hakkında konuşalım degrade için kural 3 degrade 6 altında gitmek ve bu kez bir degrade yapmak 7 Bu seferki oldukça fazla yapacağız olan istediğiniz şekilde ayarlamak içine gidin renkler ve biz şimdi yüzdeleri kullanabilirsiniz duraklarında edeceksin kullanabileceğiniz sayıları kullanırken veya piksel burada da EM kullanabilirsiniz EM piksel veya yüzdeler şımarık değerleri eflatun 40 piksel turkuaz Yetmiş dört piksel yapacak ve siyah bir durağı 80 piksel verecek Alice kutu yedi tarayıcı olduğunu işlemek check out yani bu sizin belirlemenizi sağlar görebilirsiniz ne kadar büyük büyük fırsatlar olacak ve nasıl sıkı onun komşu rengi yanında olacak nedenle temelde ben bu yapmak istiyorsa Bir çok sert hatlı Ben sadece bu iki sayıyı maç Sadece nerede yaparsanız siyah ihtiyaçları, örneğin turkuaz için turkuaz maç olduğunu seksen ve tazelenmiş olarak Şimdi şimdi ne ben eğer maç olduğum için ben çok sert bir çizgi var gösterileri bakın Aynı etkiler yapmak istiyorum o turkuaz karşılayan Eflatun oldu Ben sadece seyretmek burada başka turkuaz ray ekleyebilirsiniz turkuaz ve bu bir keçi yapmak 40 biz görmelisiniz Ben sayfayı yenileyin magenta için durdurmak maç öğretmen üniversite karşılayan eflatun da başka radikal toplamak vardır O şimdi zor-line vardı Bir sabit hattı yapar bu yüzden yapıyoruz çünkü üniversite durakları tam karşılayacak Eğer biraz dışarı renkleri yaymak kolaylığı yumuşatmaya istiyorum Bu 160 üyenin doksan altı gibi siyah bir şey yapalım yapmak ve daha sonra turkuaz 88 gibi bir şeye yakın hale getirecek Alex bu ayarları sizin macenta izin görebiliyorum, yenilemeden o hale Biraz daha hakim ve kırk aralıkları olduğunu görüyoruz 288 ve daha sonra boşluk nereye turkuaz özelliği siyah biraz daha dışarı yayılabilir çok dar senin siyah yayıldı öğretir belki 120 siyah koymak Eğer onun kadar sıkı değil biraz daha yayılmış görürsünüz Orada yenilemek saldırıyı bakın geri böylece size degradelerdeki renkleri yapmanızı sağlar her yerde durdu hızla tartışacağız şimdi istiyorum yaratma radyo geçişlerini yinelenen ve sonra bitireceksin bu yüzden sadece kural numarasını yedi kopya izin vermedi ve en yapalım Bu bir sonra gradyan 8 orada önündeki şekli kaldıracak ve eğitmen kelime radyal yapacağız koymak değil tire radyal degrade tekrarlayarak en bu bir yüzdelerini kullanmasına izin yüzde yetmişi macenta için bu bir bekletin seksen yüzde ve siyah dünyası doksan yüzde turkuaz ve kullanmak zorunda Renk orada durur radyal degrade meydana yinelenen var Eğer tekrarlanan radyal degradeler kullanarak başlatmak istediğiniz belirli bir renk ile yapmak sen ve o renkle emin veya nereye macenta çok sert-hat almak ne olur edeceğiz âlimler çünkü Luke çalışır iki siyah karşılar olacak, sadece çizgi başkalarının döngü tekrar tekrar olacak Şimdi eflatun kalacaksın, siyah uzun sert bir çizgi var buluştuğu siz de sonunda burada macenta koymak sürece Şimdi diyelim ki elimizde bakın kılan bu ne her bir göz atalım Eflatun şimdi radyo degrade yinelenen turkuaz ve siyah Sadece çok halkalarını istemiyordu şimdi ne devam Orada sadece bu yapmak ne yapabilirim Ben bu 30 yapmak temelde eğer küçük sayılar Bu% uh 40 ve dis 850 Bu sizin dikkatli olmalıyız istediğiniz herhangi bir sayı çünkü bazen yapabilir birbirlerini üst üste olacak renkler dedi böyle belirli bir şekilde bu numaralar Bu izin bu yüzden şimdi, bir görebilirsiniz ne var görmek çok halkalar let bar yinelenen degrade içindeki hey Şimdi bu yapalım 50 altmış yetmiş içinden tekrarlayarak nasıl altmış olmak zorunda hiç biraz daha iyi görebiliyorum onların ve bu numaraların karıştırmasını bir sürü bunun olup olmadığını belirleyecek getiriyor Orada yinelenen ama sadece birkaç tamam en hızlı Örneğin 1'den daha göstereyim Bu sadece biz sadece yapılan bir yapacak Galce ve degrade dokuz burada ve renklerin önünde bulunuyor en çok daire siyasi belirtti şeklinde yapalım Burada sayfa CC aynı elips yenilemek Mükemmel bir daire burada tamam bu yüzden bu örnekleri kullanarak boy MZ onları konumlandırmak için nasıl gösterir istediğiniz yere başlatmak için radyal degrade olsun senin elemanın içinde size degradeler herhangi bir boyut herhangi bir şekil yapmak istiyorum İstediğiniz birçok kolej gibi onları istediğiniz ve ayrıca onu yinelenen yapabilirsiniz İstediğiniz ve eğer biz zaten şeffaf renkleri size sahip tartışılan Eğer gitmek için saydam anahtar sözcüğünü kullanabilirsiniz tam bir şeffaflık veya RGBA kullanabilirsiniz LA renk değerleri olarak renk değeri veya H yeşil ışık yaktı bir sen içine giderseniz bir gösteri koymak için biraz daha vermek ve en verelim o sınır yarıçapı Ben radyal degradeler en kullanışlı geleceğini düşünüyorum nerede ve bu Sadece yüzde yüz temelde sirkülerini yapmak diyelim Eğer şimdi bir jüri taze CC sağlık kontrolü o mükemmel dairesel yaparsanız Eğer güzel ya özellikle ilk göstermek bir güzel 3d parlak yapmak nasıl var ya da iş o serin yuvarlak düğmeleri veya tüm yapmak istiyorum düğmeleri de Eclipse degradeler kullanabilirsiniz dudaklar anahtar emin o elips kalır yapmak istiyorsanız Size bu koymak için onlar da olmazdı yuvarlak dikdörtgen düğmeler gibi biliyorum Güzel ilgili Ben yuvarlak dikdörtgen düğmeler sadece burada bu sınır yarıçapı kaldırmak bulacağız şimdi tüm Ben sadece bu bütünü kopya olacak diğer tarayıcılar için tüm önekler de Arka plan özelliği kontrol C aşağı bir mayın bu bir hareket edeceğiz Emin Ben de aşağı disk kapanış küme ayracı çift yapmak bu yüzden WebKit edelim hedefi Firefox gibi benler olsun hedef ms Internet Explorer şu istediğiniz son bir bütün opera Bu oyuna gelecek biridir çünkü hiçbir önekleri olan Tüm tarayıcılar bu ayarı kullandığınızda ve onlar önek güvenmeyin artık o kadar zaman bu tarayıcılardan birini Bu kural bu önek dayanarak durdurmak ama bu mesela am uygulanacak gidiyor ayardır Bu WebKit gibi tüm bunlar bir araya kullanmak WebKit Bütün bu hat bile olacak kullanılan ve Google Chrome olması değil bu bir Google Chrome'u kullanarak olacak sen bence kendiniz kontrol edebilirsiniz Ben bütün bu kaldırırsanız bu yüzden zaten Google Chrome'da çalışır Hala benim arka plan görmek gerekir Google Chrome'da bile öneki olmadan tamam zaman size aa WebKit çoğu MS I olacak içinde istiyorum izin delikleri olan ve daha sonra standart yaklaşım, normal Seni yaklaşım yapmak geçişlerini için aynı şey Ayrıca dokuz ve içinden biri bu kod kullanılabilir olması ve sayfalar herhangi seni varsa video ile hp işler geliştirmek yani bu kadar bitmeli ne kopyalayıp yapıştırın gerçekten sahip olur ile tamam o Rep doğrusal ve radyal degradeler ve CSS3 kadar.

Açıklama

Ders Kodu: http://www.developphp.com/video/CSS/Radial-Gradient-Background-Tutorial CSS3 radyal degrade () ve HTML elemanları için ayarı arka plan olarak kullanılabilir yinelenen-radyal-degrade () ile ilişkili çeşitli parametreleri ve değerlerini öğrenin. Bir önceki videoda lineer gradient () ve tekrarı-lineer gradyan () programlama parametrelerini kaplı. http://www.youtube.com/watch?v=INyn2I8a5bg

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Adam Khoury

Adam Khoury

Profesyonel bir online bedava gibi kod ve tasarım öğrenin. JavaScript, PHP, SQL, HTML, CSS, ActionScript ve daha fazlası gibi usta geliştirme teknolojileri. Tüm videoları http://www.developphp.com daha iyi organize olan

YORUMLAR



9.7/10

  • 89
    Olumlu
  • 2
    Olumsuz
  • 15
    Yorum
  • 10952
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • gamingbits

    gamingbits

    2 Mayıs 2006
  • LinusTechTips

    LinusTechTip

    25 Kasım 2008
  • WePlayWeWatch

    WePlayWeWatc

    3 Temmuz 2013

ANKET



Bu sayfa işinize yaradı mı?