HOMESudah lama sekali ya blog ini tidak membahas lagi tentang CSS3. Sekarang hampir semua browser sudah ditanamkan teknologi terbaru untuk melihat halaman suatu Web/blog yang berpenganut CSS3. Eh tapi sebelumnya CSS3 itu apa sih? Menurut wikipedia, CSS adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu website, baik tata letak, jenis huruf, warna, dan semua yang berhubungan dengan tampilan atau gaya suatu web sedangkan 3 disana dimaksudkan bahwa css tersebut versi ketiga.
Sebelumnya juga saya pernah membahas tentang CSS3, misalnya seperti CSS3 transform yang menerangkan tentang putaran, sebenarnya disini juga saya akan menjelaskan hal yang sama namun bedanya, efek yang di berikan akan lebih halus bahkan hampir menyamai javascript. Penasaran? yuk lihat kebawah.
Arahkan kursor kamu untuk melihat efeknya
Untuk penerapan efek itu gimana gan? ih si agan, itu mah mudah atuh, ente tinggal sisipin css berikut pada template agan, tepatnya di atas ]]></b:skin>
.putar{
opacity: 0.05;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-webkit-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.putar:hover {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1.3;
-moz-box-shadow: 1px 1px 14px #aadd27;
-webkit-box-shadow: 1px 1px 14px #aadd27;
box-shadow: 1px 1px 14px #aadd27;
}
Udah belum gan? belum atuh, itu mah baru naro cssnya aja, nah biar efeknya jalan maka ente harus sisipin class="putar" pada HTML gambar. Contohnya? lihat ke bawah yuk!
Saya kan punya HTML gambar nih
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1sK_vaLBhSktxx2W0ijU30DG2vJ-eT8yJmT2K_XAgF7Ykk9vLDYzATI5QPXSLT_VXKvupBGOURDmDnNrQo5kvRcYa0SQxVNkAzLKZCkUWWX9O-Q3dS2yBWXfikLlmLpmpJA-nxUzDK9u1/s1600-r/Header.png" />
nah biar efek itu muncul pada gambar tersebut maka saya harus sisipkan class="putar" pada HTML gambar itu, jadinya seperti di bawah ini
<img class="putar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1sK_vaLBhSktxx2W0ijU30DG2vJ-eT8yJmT2K_XAgF7Ykk9vLDYzATI5QPXSLT_VXKvupBGOURDmDnNrQo5kvRcYa0SQxVNkAzLKZCkUWWX9O-Q3dS2yBWXfikLlmLpmpJA-nxUzDK9u1/s1600-r/Header.png" />
Mudah bukan? tapi ngomong - ngomong ngerti g gan? klo g ngerti mah garuk2 kepala sambil buang nafas dalam - dalam. Mungkin hanya sekian saja triknya, besok - besok mungkin ada trik yang bagus lagi, makannya biar g ketinggalan pantengin terus oketrik biar g ketinggalan trik trik yang bombastis
.
Sebelumnya juga saya pernah membahas tentang CSS3, misalnya seperti CSS3 transform yang menerangkan tentang putaran, sebenarnya disini juga saya akan menjelaskan hal yang sama namun bedanya, efek yang di berikan akan lebih halus bahkan hampir menyamai javascript. Penasaran? yuk lihat kebawah.
Arahkan kursor kamu untuk melihat efeknya
Untuk penerapan efek itu gimana gan? ih si agan, itu mah mudah atuh, ente tinggal sisipin css berikut pada template agan, tepatnya di atas ]]></b:skin>
.putar{
opacity: 0.05;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-webkit-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.putar:hover {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1.3;
-moz-box-shadow: 1px 1px 14px #aadd27;
-webkit-box-shadow: 1px 1px 14px #aadd27;
box-shadow: 1px 1px 14px #aadd27;
}
Udah belum gan? belum atuh, itu mah baru naro cssnya aja, nah biar efeknya jalan maka ente harus sisipin class="putar" pada HTML gambar. Contohnya? lihat ke bawah yuk!
Saya kan punya HTML gambar nih
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1sK_vaLBhSktxx2W0ijU30DG2vJ-eT8yJmT2K_XAgF7Ykk9vLDYzATI5QPXSLT_VXKvupBGOURDmDnNrQo5kvRcYa0SQxVNkAzLKZCkUWWX9O-Q3dS2yBWXfikLlmLpmpJA-nxUzDK9u1/s1600-r/Header.png" />
nah biar efek itu muncul pada gambar tersebut maka saya harus sisipkan class="putar" pada HTML gambar itu, jadinya seperti di bawah ini
<img class="putar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1sK_vaLBhSktxx2W0ijU30DG2vJ-eT8yJmT2K_XAgF7Ykk9vLDYzATI5QPXSLT_VXKvupBGOURDmDnNrQo5kvRcYa0SQxVNkAzLKZCkUWWX9O-Q3dS2yBWXfikLlmLpmpJA-nxUzDK9u1/s1600-r/Header.png" />
Mudah bukan? tapi ngomong - ngomong ngerti g gan? klo g ngerti mah garuk2 kepala sambil buang nafas dalam - dalam. Mungkin hanya sekian saja triknya, besok - besok mungkin ada trik yang bagus lagi, makannya biar g ketinggalan pantengin terus oketrik biar g ketinggalan trik trik yang bombastis
.Baca Selengkapnya →
Dalam Template, border tidak lepas dari penggunaan untuk membatasi suatu elemen atau objek. border pada css pertama menggunakan nilai yang simple dan hasil yang kurang beitu baik namun untuk penerapan css3 pada border itu indah dan terlihat keren, dengan penggabungan beberapa warna border atau garis batas akan menjadi lebih menarik di lihat tapi sayangnya tidak semua browser mendukung sentuhan CSS3 katanya dan kalau g salah tahun 2022 semua browser akan mendukung CSS3, (wah itu lama sekali). Oke deh g usah di pikirkan, yang penting masih banyak juga kok browser yang mendukung CSS3. Sekarang lihat keindahan border dengan sentuhan CSS3 y.
Sentuhan CSS3 Transform ini memang tidak banyak blogger yang memakainya entah karena apa, saya pun jarang memakai CSS3 yang satu ini karena saya bingung untuk memakainya. Walaupun tidak tahu kegunaanya untuk apa tapi tidak salahnyakan kalau saya menyebarkan tentang CSS3 transform ini? Kalau memang tidak ada salahnya silahkan di baca, tapi kalau ada salahnya dan tidak suka silahkan keluar dari post ini. Pada postingan sebelumnya juga saya pernah memberikan trik tentang dasar CSS3 yang diantarnya,
Setelah sekian postingan telah terupdate bukan mengenai CSS3 sekarang muncul lagi trik tentang CSS3. Mungkin banyak teman - teman saya yang menunggu postingan tentang css3 namun tidak saya tanggapi karena ada kesibukan offline namun sekarang saya berikan walaupun tidak banyak. Trik CSS3 kali ini tentang cara Tombol dinamis dengan CSS3, pada postingan sebelumnya mengenai 
Asyik nih saya tulis lagi tentang css3 yang keren abis dah, kali ini css3-nya tentang Image Gallery. Sebenarnya trik css3 kali ini menggunakan efek hover yang apabila disentuh akan memperbesar atau berubah bentuk. Dari pada pusing baca penjelasan saya yang g jelas mendingan kita lihat demonya yuk.
.
. Walapun kurang sempurna kalau sobat dapat menyesuaikan dengan template sobat mungkin Banner Iklan dengan CSS3 ini akan lebih baik dari pada sobat tidak mengutak-ngatik Banner ini. Sekarang saya akhir dahulu y. Terima kasih dan Happy Blogging 
keren bukan efek yang di timbulkan css3 
