Advertise

Tampilkan posting dengan label CSS3. Tampilkan semua posting
Tampilkan posting dengan label CSS3. Tampilkan semua posting

Transfaran dengan CSS3 Lebih Senada dan Selaras

Membuata transfaran pada background bisa menggunakan kode opacity, namun dengan opacity objek keseluruhan biasanya akan terbawa menjadi transfaran. Dengan penggunaan css3 dengan mengubah nilai “rgba” hal ini bisa dilakukan pada area background-color, border-color maupun color pada text sehingga kesan senada dan selaras akan lebih terlihat. Contoh :

body {
        background: blue ;
}
.main-wraper {
      background : rgba ( 0, 0, 0, 0.1) ;
      border : 1px solid rgba ( 0, 0, 0, 0.3) ;
      color : rgba ( 0, 0, 0, 0.5);
}

Experimen Template 90% CSS3 di ChugyStudio

Lama tidak blogging bukan berarti tidak mengikuti perkembangan dari rekan blogger yang masih selalu Update diblognya. Sesekali saya berkunjung ke beberapa blog kawan saya di antaranya, belantara Indonesia, Om Dj Ferdinana, Bang hendro Prayitno dll ternyata mereka juga sama sepertinya dengan saya yang jarang buat posting kecuali Blognya belantara Indonesia yg masih sesekali Update hehehe.

Postingan ini mungkin hanya sekedar mengobati rasa kangen saya pada blogger yang lama jarang di buka. Tadinya saya ingin membuat posting seputar CSS3 tapi mungkin udah basi karena memang udah banyak yang posting hehe. dan iseng-iseng juga ChugyGogog membuat sebuah mini studio desain online yang di fungsikan untuk menyimpan portofolia dari projek desain yang saya buat, walaupun mini studio ini belum sepenuhnya rampung.

Sedikit mengenai tampilan dari Chugy mini Studio ini saya menggunakan hampir 90% menggunakan CSS3 jadi mungkin untuk beberapa browser yg blm mendukung CSS3 tampilannya kurang nyaman.  Buat rekan-rekan yang ingin berkunjung ataupun mau order desain bisa kunjungi ke link berikut http://chugy.co.cc.
Terimakasih Happy Blogging

Membuat Speak Buble dengan CSS3

Selamat siang brader blogger semua kembali posting ni setelah sebelumnya memposting firefox versi 4 yang ternyata memiliki tampilan yang sedikit berbeda dari versi seblumnya. untuk kali ini ini saya akan memposting bukan seputar internet komputer melainkan seputar css dan blogger.

Seperti judul posting ini yaitu membuat Speak Buble dengan Css3. Speek buble ini merupakan tehnik permainan border dengan css. Dengan menggunakan Css Speak Buble dapat dibuat tanpa menggunakan image jadi ini akan lebih ringan dibuka di browser.

Langsung saja pada penerapan dan koding css-y.
Sebagai contoh saya membuat speak buble untuk teks area.
contohnya bisa dilihat dibawah ini.

Pertama kita buat kode CSS Speak Buble-y seperti ini.

Selanjutnya untuk memanggilnya gunakan kode html seperti ini :

Cukup mudah bukan silahkan di custom sesuai selera blogger.
Untuk background bisa menggunakan background Gradient CSS3, Box shadow ataupun lain2nya biar lebih menarik. Selamat mencoba.

Background Stripers And pattern Dengan CSS3 No Image

Selamat sore Brader Blogger semua akhirnya kembali membuat postingan walaupun sekarang jarang update tapi alhamdulilah disisa waktu luang ini akhirnya bs kembali update. Untuk sekarang saya akan share seputar tutorial CSS3 yang lama juga tidak ada info yang baru. Apalagi bang Hendro sesepuh CSS3 juga udah jarang ngebahas CSS3 hehehe.... gimana ni bang Hendro kabarnya kayanya lg asyik dengan koding-koding di weblognya.

background pattern full css3 tanpa image
Langsung saja pada pokok pembahasan. tutorial CSS3 kali ini akan membahas pembuatan background dengan texture/pattern full CSS3 seperti gambar diatas, dimana semua itu dilakukan menggunakan koding CSS3 tanpa image.

Untuk Demo livenya bisa lihat pada link di bawah.

Demo Live

Dan untuk codingnya dibawah.

Angled Pattern
.angled {
background-color: #ac0;
background-image: -webkit-gradient(linear, 0 100%, 100% 0,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
}


Horizontal Pattern
.horizontal {
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

Vertical Pattern

.vertical {
background-color: #f90;
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

Checkered Pattern
.checkered {
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(45deg, transparent 75%, #555 75%),
-moz-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(45deg, transparent 75%, #555 75%),
-o-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),
linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #555 75%),
linear-gradient(-45deg, transparent 75%, #555 75%);
}

Diatas hanya beberapa saja background pattern dengan css3 silahkan Anda berekplorasi lagi. Selamat mencoba.

Membuat Bintang Dengan CSS3 "Starbursts CSS3"

Selamat sore blogger semua kayanya udah lama chugygogog tidak buat postingan. Okelah langsung saja di tengah sedikit kesibukan saya coba membuat sebuah tutorial blogger yang mudah-mudahan bisa bermanfaat. Tutorial kali ini saya akan membahas seputar CSS3 yaitu membuat Starburst atau bentuk seperti bintang dengan sudut berbentuk segitiga seperti gambar di bawah ini.
efek bintang css3 starbursts css3
Atau untuk lebih jelasnya bisa lihat demonya pada link dibawah ini.

Lihat Demo

Tehnik css3 ini saya temukan diblognya www.matthewjamestaylor.com yang merupakan blogger penganut css3 silahkan dicek saja. Oke langsung pada kodingnya saja ya.

ul.starbursts {
list-style:none;
margin:20px 0;
padding:0;
overflow:hidden;
}
ul.starbursts li {
float:left;
width:10em;
height:10em;
position:relative;
}
ul.starbursts * {
margin:0;
padding:0;
line-height:1.2em;
}
.starburst {
display:block;
width:6em;
height:6em;
background:#fe0;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
rotation:-45deg;
position:relative;
top:2em;
left:2em;
text-align:center;
text-decoration:none;
color:#000;
font-weight:bold;
font-family:Arial, sans-serif;
}
.starburst span {
display:block;
width:6em;
height:6em;
background:#fe0;
-webkit-transform:rotate(22.5deg);
-moz-transform:rotate(22.5deg);
rotation:22.5deg;
}

Untuk mengeksekusinya gunakan kode dibawah ini.

<a href="#" class="starburst">
<span><span><span>
<br />NEW<br />CSS3<br />Starbursts!
</span></span></span>
</a>

Tehnik ini sama dengan kita membuat tombol atau button dengan menambahkan "class" pada link yang ingin di pasang. Silahkan ganti teks yang ada didalam starburst tersebut, Selamat mencoba