Web design and hosting, database, cloud and social media solutions that deliver real business results
  • Veritabanı Hizmetleri
    • Araçlar
      • Claytabase Server Disk IOPs Calculator
      • SQL Kod Yedekleme
      • SQL Yazıcı
    • Teknik Makaleler
      • SQL-Server
      • SQL Server 2008 Bakım Planı
      • SQL Server işlevlerini kullanma
      • SQL Server Tarihlerini Kullanma
  • Web Sitesi Tasarımı
    • Ousia
    • Teknik Makaleler
      • ASP-NET
      • CSS
    • Web Sitesi Güvenliği
    • Wight Adası
  • İş hizmetleri
    • Microsoft Azure
    • Microsoft Office
  • Sosyal Medya
  • Hakkında
    • Portföy
    • Takım
      • Chester Copperpot
CS - češtinaDE - DeutschEN - EnglishES - EspañolFR - FrançaisHI - हिंदीIT - italianoPL - polskiPT - PortuguêsRU - русскийZH - 中国的

Kaydırma CSS oluştur

Kaydırma çok fazla yerden tasarruf edebilir ve CSS3'te çok hassas bir şekilde ele alınabilir, buna CSS Sprite görüntüsü ve bazı matematik güçleri eklenebilir; bu görüntüyü aşağıdaki dönen pankarta dönüştüreceğiz.
Bu, bağlantıların arka planı olarak kullanacağımız Sprite'dır.
Social Media sprite image
Böyle bir dönen banner oluşturmak için. Tüm bağlantılar Claytabase sosyal medya kanallarına işaret ediyor.

CSS

<style type="text/css">
/*Sprite Backgrounds*/
.smFbk64{background-position: 0px   -0px}
.smTwi64{background-position:-66px  -0px}
.smGoo64{background-position:-132px -0px}
.smLin64{background-position:-198px -0px}
.sm64{width:64px;height:64px;display:inline-block;overflow:hidden;background-image: url('https://www.gsclayton.net/System/Artwork/Articles/SocialMedia_64.png');background-repeat:no-repeat;}
.rnd50{border-radius:50%}
/*Moving Parts*/
.parentDiv{width:64px;height:64px;overflow:hidden;margin:auto}
.followDiv{width:320px;height:64px;position:relative;
animation:followDivSlide ease infinite 10s;-webkit-animation:followDivSlide ease infinite 10s;-moz-animation:followDivSlide ease infinite 10s;
-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;}
@keyframes followDivSlide{from{left:0px;}15%{left:0px;}25%{left:-64px;}40%{left:-64px;}50%{left:-128px;}65%{left:-128px;}75%{left:-192px;}90%{left:-192px;}to{left:-256px;}}
@-webkit-keyframes followDivSlide{from{left:0px;}15%{left:0px;}25%{left:-64px;}40%{left:-64px;}50%{left:-128px;}65%{left:-128px;}75%{left:-192px;}90%{left:-192px;}to{left:-256px;}}
@-moz-keyframes followDivSlide{from{left:0px;}15%{left:0px;}25%{left:-64px;}40%{left:-64px;}50%{left:-128px;}65%{left:-128px;}75%{left:-192px;}90%{left:-192px;}to{left:-256px;}}
</style>
/*HTML*/
<div class="parentDiv">
<
div class="followDiv"><a class="sm64 rnd50 smFbk64" href="https://www.facebook.com/Claytabase"></a><a class="sm64 rnd50 smTwi64" href="https://twitter.com/claytabase"></a><a class="sm64 rnd50 smGoo64" href="https://plus.google.com/+ClaytabaseCoUk"></a><a class="sm64 rnd50 smLin64" href="https://www.linkedin.com/company/claytabase-ltd"></a><a class="sm64 rnd50 smFbk64" href="https://www.facebook.com/Claytabase"></a></div>
</
div>

Sprite

Resim 8x64 genişliğinde ve 8x64 yüksek görüntüler, 658px genişliğinde ve 196px yüksekliğinde bir görüntü olarak birleştirildiğinde şu an sadece ilk 4 resimle ilgileniyoruz.
Her biri için, kısaltıcı background özelliğini kullanarak oluşturmak için 4 CSS sınıfı oluşturduk.
Gördüğünüz gibi, resim her resim arasında 2 piksel bir boşluğa sahip. Bu yüzden, bunu -68px vb. Konumuna ekledik.
Ayrıca, tüm öğeleri kullanmak için 2 ortak sınıf seçebiliriz, sınır yarıçapını ve her bir öğenin boyutunu ayarlarlar.

Konteyner

Bu, yukarıda tanımlanan resimlerle aynı genişlik ve yüksekliğe (64x64) sahip basit bir div, çocuğun geri kalan bölümünü gizlemek için gizlenmiş olarak taşmayı ayarladık.
Üst Bölüm Örnek

Çocuk / Çocuk

CSS'de taşınan ikinci div budur. Yüksekliği 64 piksele, ancak bu kez genişlik 64 piksellik olmalıdır * 4 bize toplam 256 piksellik veriyor.
Bu örnekte, sonunda görünen ilk Sprite'ı çoğaltmak, Facebook ile Linked In arasında ani bir gerginlik önlemek için genişliği 320px olarak ayarlamak istiyoruz.

Animasyon

Shema CSS dfilement
Animasyonumuz div'u hareket ettirirken herhangi bir noktada yalnızca bir öğenin görülebilmesi için div'u 0 piksel, -64 piksel, -128 piksel, -192 piksel ve -256 piksel konumlarına taşır. Taşmanın olmadığı bir örnek için aşağıya bakınız ve pozisyonlamanın her bir unsuru nasıl taşıdığının bir örneği için sağ tarafta görüyorsunuz.

Author

Gavin Clayton
Gavin Clayton
SQL Server ve ASP.NET ile çalışmamı sürdürmek için bir yol olarak Claytabase'i 2010'da kurdum. Bu, Ousia İçerik Yönetim Sisteminin konseptten pazardaki en hızlı CMS'lerden biri haline getirilmesiyle sonuçlandı.
 Google Translate
Google Translate

Helpful?

Please note, this commenting system is still in final testing.

Our services

database maintenance | database design | web site design | web site hosting | web site security | cloud services | social media

© 2016 Claytabase Ltd, registered company in the UK 08985867

Quick links

RSS Login ContactCookie PolicySitemap

Find us on social media

facebook.com/Claytabaseinstagram.com/claytabase/twitter.com/Claytabaselinkedin.com/company/claytabase-ltd

Get in touch

+441983300796info@claytabase.co.ukGround Floor, Building 1000, Lakeside North Harbour, Western Road, Portsmouth, Hampshire, United Kingdom, PO6 3EZ

Partners and memberships

Ousia logo
Bu sitedeki ayarlar tüm çerezlere izin verecek şekilde ayarlanmıştır. Bunlar, çerez politikamız ve ayarlar sayfamızdan değiştirilebilir. Bu siteyi kullanmaya devam ederseniz, çerezlerin kullanımını kabul etmiş olursunuz.
Ousia Logo
Ousia CMS Loader