Web dan Grafis Desain
Author
Sharing is Beautiful.
Kp. Bumi Godean RT.01 RW.06
Wonosobo , Jawa Tengah
56311
Indonesia
alfirous@yahoo.com
081215880929
DOB: 09/03/----
Maaf web sedang dalam perbaikan setelah vakum dalam waktu yang lama.

Macam-macam Bentuk CSS3

Bermacam-macam jenis dan bentuk dari CSS3 (baca  :Membuat CSS3 dan Membuat CSS3 dengan mudah) dapat kamu temukan di sini. Jika demo di bawah tidak muncul dapat di lihat di http://css-tricks.com/examples/ShapesOfCSS/
Kode-kode CSS3 di bawah ini bisa anda Edit sesukanya. Cara pemanggilannya :

.contoh {
ketek:mambu;
}

Ambil contoh tanpa titiknya seperti ini
<div class="contoh"></div>     

Jika masih bingung silahkan tinggalkan Komentar atau kirim pesan lewat Facebook @Mbah Qopet
Yin YangBack to Menu








.yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
.yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
.yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
Cut DiamondBack to Menu







.cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
.cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
8 Point BurstBack to Menu







.burst-8 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
transform: rotate(20deg);
}
.burst-8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
Talk BubbleBack to Menu







.talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}







.pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}







.egg {
display:block;
width: 126px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
InfinityBack to Menu







.infinity {
position: relative;
width: 212px;
height: 100px;
}

.infinity:before,
.infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}







.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
Star (5-points)Back to Menu







.star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
.star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);

}
.star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
Star (6-points)Back to Menu







.star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
.star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
TrapezoidBack to Menu







.trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
TriangleBack to Menu







.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}







.oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}







.circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

Credit and Sumber : css-tricks.com

104 komentar :

  1. Pertamax colong ahhh :D
    Salam Unyunyu :D
    by mas Kambing :D

    BalasHapus
  2. Ajaib nih,
    bisa dibilang ini sulap ya bro =))

    BalasHapus
  3. mbah ane ga bisa lihat nih ga pake chrome Y_Y

    BalasHapus
  4. Itu memang nggak ada contoh atau memang saya yang nggak nampak ya?

    BalasHapus
  5. link sumbernya mana bro..neh dari csstrick kan...

    BalasHapus
  6. membingungkan mana ni , hasilnya :(

    BalasHapus
  7. @Dicky Rahman Ramadhan : selamat , unyu-unyu :*

    @Musa Khairul Umam : selamat buat keduaxnya :)

    @Zona Tutorial : hahaha , mungkin juga :D

    @amalul ahli : bentuk-bentuk CSS3 lho mas :)

    @M. Nasihin : itu di atas udah ada tempat liatnya.

    @Rudy Azhar : ada bang , pake browser apa ? di chrome keliatan kok.

    @Anonymous : itu ada di atas.

    @awan : di atas ada contohnya.

    BalasHapus
  8. Di firefox 8 ngga muncul. Kenapa ngga cantumin link sumbernya, ini dari css-tricks kan? Soalnya itu karya beberapa orang juga.

    BalasHapus
  9. Nanti aqu coba terapkan mbah,, tengkyu ya

    BalasHapus
  10. Waduhh gara-gara keluar pergi ke warung kecolongan dah pertamaxnya.hheee....

    nice sobat infonya tentang CSS,jdi bnyak tau saya macam macamnya..:)

    BalasHapus
  11. @Ijal Fauzi : iya mas , sudah tadi lupa soalnya.

    @Cayun Notes : silahkan :) , sama-sama

    @Ageboy : hihihihi , gpp sob makasih komentarnya

    BalasHapus
  12. sob kok yang disini gak nongol gambarnya y, tapi ane buka yg CSS-Tricks gambarnya nongol.
    ane baru paham sekarang sob setelah melihat gambarnya dan penjelasan ente.

    BalasHapus
  13. @bayu aldi yansyah : iya mas kenapa ?? =))

    @Liandri eko : iya karena yg di CSS-Tricks ada kode buat Support di browser lain , sip

    BalasHapus
  14. gak keliatan bedane mbah,, bingung iyonge

    BalasHapus
  15. @Kang Topjer : keliatan di chrome kang.

    @best Movie : haha , thanks

    BalasHapus
  16. keren jg yoh mbah, ane pke mozilla ga kliatan dimari, tp kt4 chris lgsung kliatan wow,, amazing!!

    BalasHapus
  17. masih belum ngerti gan sama yg namannya css.. tpi gx papa lah utk pembelajaran

    visit yaw http://dexamaker.blogspot.com/2011/11/tuneup-utilities-2012-full-version.html

    BalasHapus
  18. mantap tutorialx bro,...,templetx juga ringan banget,,,thx ya ilmux *smile

    BalasHapus
  19. Bookmark dulu Sob...biasanya pas dibutuhkan nyarinya reponk banget...nice css tricks...Happy blgging

    BalasHapus
  20. salut deh sob,, yg bisa utak atik kode2 di css, sy masih newbie banget tuk urusan2 begini...

    BalasHapus
  21. oh iya skalian izin follownya sob

    BalasHapus
  22. CSS yang di atas itu jenis CSSnya atau bentuk-bentuk penggunaaannya?
    salam kenal yah sebelumnya, kunjungan pertama nih

    BalasHapus
  23. Wah,dapat istilah2 baru tentang CSS :D
    Maklum lum begitu mengenak CSS :D
    Cuman dikit2 ..He..he....

    BalasHapus
  24. saya masih belajar mengenai css sobat,, berbeda dengan HTML sobat,,,

    Terima kasih atas infonya sobat...

    BalasHapus
  25. mantaav dha mbah ...
    btw kog ada example kata ketek:mambu sich ???? =))
    adminnya blom mandi yaCh ... :)) =))

    BalasHapus
  26. ane g mudeng begituan gan :((

    BalasHapus
  27. Blog'e Cah Nganjuk mensupport blog agan agar trs berkarya...keep write gan biar cpt dpt pr dr google :)

    BalasHapus
  28. nice trick.. tapi masih bingung.. apa hanya bisa di jalankan di chrome aja ya @_@

    BalasHapus
  29. wahh mantab tutornya mbah,makasih dah share...

    BalasHapus
  30. kug ga langsung disertain dengan hasilnya bro?

    BalasHapus
  31. ketek:mambu.. ho oh betul, ane emang belum mandi waktu kesini =))

    css bikin betah untuk berlama-lama uthak uthik template
    makasi tipsnya :D

    BalasHapus
  32. Kodenya sulit juga nii...

    BalasHapus
  33. Kebetulan baru belajar Css3 neh ane,
    lengkap banget ni tutorial...
    Bookmark dulu ahh...
    thanks sobat

    BalasHapus
  34. wkkwkwkwkkw,, keren2 mbah efek css nya,, =))

    BalasHapus
  35. Makasih dah share ilmu css nya :)

    BalasHapus
  36. infonya sangat bermanfaat bro, tapi sayangnya cuma bisa di buka melalui browser

    BalasHapus
  37. gak bisa dilihat sob effectnya padahal udah di chrome???

    BalasHapus
  38. minta demonya dongs sob biar makin enjoy :D

    BalasHapus
  39. Manteb Tutornya.Izin Coba coba dulu yah

    BalasHapus
  40. pokoknya kode css yang sobat berikan bermanfaat bgt dan komplit tenan rek,,,

    BalasHapus
  41. waw keren keren. Thx ya master sangat membantu.

    BalasHapus
  42. @Kang Topjer : iya , pake chrome emang mantep.

    @dexamaker : sama ane juga sob , belum terlalu paham kita belajar bareng.

    @Rohis Facebook : makasih juga :)

    @Venomia : silahkan jangan sungkan :D

    @Iskaruji dot com : wah sampai di bookmark segala , makasih sobat :)

    @al kahfi : yap , ga ada kata Newbie maupun master kita belajar bareng.Silahkan :)

    @f4dLy : bentuk-bentuknya sob , salam kenal semoga betah di sini.

    @Aku mau uang 30 juta dari ikut kontes Seo : ayo belajar lebih banyak lagi , soalnya keren-keren CSS.

    BalasHapus
  43. @Asis Sugianto : iya berbeda fungsi , tapi harus ada dua-duanya. sama-sama

    @Shinobi Cafe : hihi , iya ane belum mandi kemaren :P

    @Edy Sant : pelajari dulu sob nanti sedikit-sedikit pasti paham.

    @Aini Sastra : yoi mas.

    @Berbagi Ilmu Pengetahuan : terima kasih buat dukungannya , PR Alhamdulillah udah dapet.

    @intan : sebenarnya di browser lain bisa , hanya belum support saja.

    @Agriculture Product : manteb juga :D , sama-sama.

    @John Terro : ada tapi cuma bisa diliat di chrome.

    BalasHapus
  44. @simple tips : wah kita sama dong belum mandi , iya bener I <3 CSS .sama-sama

    @API : ga sulit juga , cuma harus di pahami dulu biar ga pusing.

    @Zh!nTho : makasih bang.

    @zaenal blog : sep, silahkan.

    @Rama88 : ane gitu lohh :D

    @Deganshah Putra : sama-sama semoga berguna.

    @Syndicate OS : baca yang bener dulu sob.

    @selalu ada : yap , memangnya bisa di buka lewat piring ? =))

    @DODE-XP.COM : baca tulisan yang bener.

    @Farixsantips : aneh amat ? di ane keliatan.

    @Abi Says Drunk : hihi , silahkan.

    BalasHapus
  45. @Farixsantips : udah ada di atas kok =))

    @Bisnis Online Blog : ya , silahkan no sangken.

    @Asis Sugianto : alhamdulillah :)

    @Admin - Ari Software : mana ada master ??

    @Bayu Aldi Yansyah : hihihi...

    BalasHapus
  46. ane disini cuma niat berkunjung aja. boleh kan? hehe.. ngomong ngomong ane kesusahan dalam CSS -.-" boleh private?

    BalasHapus
  47. bukannya ada webkit ma moz
    moz kan untuk mozzila firefox?

    BalasHapus
  48. wah,, CSS 3 ya,, saya masih asing ..
    yang pernah dengar dan nyoba itu kyknya yang circle :)

    BalasHapus
  49. keren ni kayanya,
    tapi sayang ane gak ngerti sob :D
    ajarin dong hhe

    BalasHapus
  50. Kunjungan pagi disini sobat,ikut meramaikan suasana.hehee

    BalasHapus
  51. kode cssnya sudah saya amankan sobat di perbendaharaan css kode saya, terima kasih yach sobat...

    BalasHapus
  52. Kunjungan Pertama Setan Nongkrong Dari Neraka.

    Salam Nongkrong

    BalasHapus
  53. pantesan mambu dr kmren mbah ... :D :P

    btw mbah, dimana yaCh download template yg minimalist yg keren ??? :)

    BalasHapus
  54. Infinity mirip kaca matanya kanjeng mami =))

    BalasHapus
  55. wah mantabs ni boleh nih belajar lagi nih

    terimakasih sudah berkunjung dan berkomentar di postingan kami, semoga terjalin persahabatan yang lebih akrab

    salam

    BalasHapus
  56. Duh daku mah enggak ngerti dah yang namanya beginian,love,peace and gaul.

    BalasHapus
  57. CSS yang menarik?.tapi tidak semuanya bisa kepake kan hehe

    BalasHapus
  58. masih belum terlihat juga gambarnya, padahal koneksi lagi ngebbut.
    oya sudah mulai pasang iklan lagi ne, gak nyoba GA sob?

    BalasHapus
  59. beuhhh lengkap bangedd ini kang :) ckckckckck.. saiia malah bingung implementasinya.. *halahhh :(

    BalasHapus
  60. wahhhh ada adsense di blog nih???? wahhhh sial, ane doang yang copo

    BalasHapus
  61. sy tunggu trik2 selajutx gan *smile

    BalasHapus
  62. Hmm,,, Jujur Ayas kagak ngerti neh Boss...
    Coba kalo dikasi Demonya..mungkin bisa sedikit Ngerti deh???
    Hwehehee......

    BalasHapus
  63. Simple tapi ok punya sahabat mbahqopet
    Ikut suport disini. Suport back-Nya selalu ditunggu salam

    BalasHapus
  64. sayang bgt tuh :(
    DEMOnya kgk bisa di Firefox :(

    BalasHapus
  65. Keren,,, lmyn buat bookmark kalo mau bkin menu ini

    BalasHapus
  66. nyari sarapan dlu mbah ??? disini ada nggak ??? :D

    BalasHapus
  67. Wah...Info bagus nih mbah..

    Cocok buat referensi, siapa tau ntar dibutuhkan.

    Makasih ya mbah..

    BalasHapus
  68. mejeng ditempat mbah ahhh, =))

    BalasHapus
  69. Coba diterangkan penerapannya Mbah... :)

    BalasHapus
  70. Mampir lg :D
    Biar rame,Biar tembus 100 :D

    BalasHapus
  71. Ane buka dari mozilla nggak ada demonya apa mungkin cuma dari chrome nimbulnya, atau emang ngga ada demonya?? hehe

    BalasHapus
  72. wah pusing mbah,,, salam kenal ya mbah, di tunggu kunjunganya

    BalasHapus
  73. blognya sangat ringan om keren banget dan dah pr 2 lg mantaps,,,
    tp sayang gak ada label atau daftar isi di blog ini yg membuat pengunjung bingung seperti saya yg baru ngeblog ini ^_^

    BalasHapus
  74. saya gak ngerti dengan artikel ini,
    soal nya cuman sepotong.
    terimaksih.

    BalasHapus
  75. Waahh... manteeppp Kang Artikelnya.. bisa dibuat pembelajaran nich... slam Kenal... :D

    BalasHapus
  76. wah mantap ne mbah qopet numpang nyimak dulu, kalau paham pasti di coba :D . salam kenal mbah ,..

    BalasHapus
  77. wah rumus css3 nya keren mbah, nanti ane coba praktekin. thanks..

    BalasHapus

Anda dapat berkomentar terkait artikel diatas dan isi komentar sepenuhnya menjadi tanggung jawab komentator.

Dilarang berkomentar dengan tidak sopan, kasar, berisi fitnah, berbau SARA, SPAM dan OOT. Setiap komentar yang masuk akan dimoderasi dan akan diterbitkan jika sesuai dengan ketentuan yang berlaku.