Showing posts with label CSS3. Show all posts
Showing posts with label CSS3. Show all posts

Stroke Text CSS

Hello hello, siang sob... dapat Experiment menarik lagi nih :D hehee... kali ini tentang "Stroke Text" udah pernah liat Stroke text? kalau belum liat nih kaya gini nih Stroke text.







Kalau ngga salah Stoke itu adalah Outline (kalo di photoshop).
Stroke Text ternyata hanya menyatukan 4 shadow text, Fungsinya untuk membentuk bayangan di pinggir-pinggir text, sama halnya seperti border yang membuat garis di pinggir objek...
dan oke deh langsung aja cara pembuatannya.

CSS Stoke Text

#stroke{
font-family:arial black;
font-size:50px;
color: white;
text-shadow:
-5px -2px 1px #000,
-3px 3px 1px #000,
4px 3px 1px #000,
3px -3px 1px #000;
}

HTML Stroke Text

<div id='stroke'>STROKE</div>


KLIK DISINI UNTUK DEMO


Eh tapi ada lho yang lebih Rapih, ini fahmi Dapetin dari http://css-tricks.com.
nih liat dulu Gambar example nya...



Langsung saja cara pembuatannya cekidot :

CSS Stroke CSS-Trik

h1 {
font-family:Arial Black;
font-size:60px;
color: black;
text-fill-color: white;
text-stroke-width: 1px;
text-stroke-color: black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
-moz-text-fill-color: white;
-moz-text-stroke-width: 1px;
-moz-text-stroke-color: black;
-o-text-fill-color: white;
-o-text-stroke-width: 1px;
-o-text-stroke-color: black;
}
Atau seperti ini :

Stroke Text with Text-shadow

h1 {
font-family:Arial Black;
font-size:60px;
-webkit-text-stroke: 1px black;
color: white;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,  
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}


KLIK DISINI UNTUK DEMO CSS-Trick


Selesai

3D text dan Inset text

Iseng-iseng tadi bikin experiment mencoba coba hal baru, eh malah jadi 3D text dan Inset text, disini baru fahmi paham bahwa cara bikin teks 3D ternyata ga susah-susah amat. Terkadang apa yang di lihat bagus ga serumit pembuatannya dan begitu juga sebaliknya... Cuma mainin teks shadow minimal 2 Shadow, di pasin Vertikal sama Horizontal jangan lupa warna di kontrasin terus jadi deh.
Inset juga hampir sama kaya 3D cuma kalau Inset lebih mainin ke Rgba color.
Soalnya untuk mentransparankan warna...
contohnya seperti ini.

CSS Inset Text

body{
background:#C92E2E;
}
#inset{
font-family:Arial Black;
font-size:100px;
color:rgba(0, 0, 0, 0.1);
text-shadow: 3px 3px 5px #C92E2E, 0 0 0 rgba(0, 0, 0, 0.8);
letter-spacing:-10px;
text-transform:uppercase;
}

HTML Inset Text

<div id='inset'>Inset</div>

CSS 3D Text

#IW-Net{
font-family:Arial Black;
font-size:100px;
color:#A60518;
letter-spacing:-10px;
text-transform:uppercase;
text-shadow:0 6px 1px #750000, 1px 5px 10px #000;
}​

HTML 3D Text

<div id='IW-Net'>indonesia</div>




KLIK DISINI UNTUK DEMO


Belajar CSS:Target

Berhari-hari belajar CSS target akhirnya sekarang bisa, walaupun sedikit-sedikit :p. Sedikit-sedikit lama-lama menjadi bukit :D <-Pepatah Motivasi.




#konten{
width:500px;
margin:auto;
font-size:1.4em;
}
#konten ul, div > div {
margin-bottom:1em;
}
#konten li {
list-style:none;
display:inline;
}
#konten > div {
-webkit-transition: height 2.5s;
-moz-transition: height 2.5s;
-o-transition: height 2.5s;
-webkit-transition:all 900ms linear;
-moz-transition:all 900ms linear;
-o-transition:all 900ms linear;
-ms-transition:all 900ms linear;
transition:all 900ms linear;
display:block;width:0px;margin:0 auto;height:0px;overflow:hidden;position:relative
}
#konten > div:target {
color:#B1B1B1;
text-shadow: 1px 1px 1px #000, 0 0 0 rgba(0, 0, 0, 0.2), 4px 4px 5px #B1B1B1;
display:block;
width:auto;
max-width:100%;
margin:0 auto;
padding:0.5%;
height:auto;
overflow:auto;
border-radius:3px;
-webkit-transition: height 2.5s;
-moz-transition: height 2.5s;
-o-transition: height 2.5s;
-webkit-transition:all 900ms linear;
-moz-transition:all 900ms linear;
-o-transition:all 900ms linear;
-ms-transition:all 900ms linear;
transition:all 900ms linear;
}
#konten > div p:first-line {
font-variant:small-caps;
font-size:1.2em;
}
#konten li{
font-family:verdana;
font-size:10px;
color:#000;
background:#ddd;
padding:5px;
height:auto;
width:50px;
margin-top:5px;
border-radius:20px;
text-align:center;
box-shadow:2px 1px 1px #000;
}
#konten a{
color:#000;
text-decoration:none;
}
#konten li:active{
position:relative;
top:2px;
border: 1px solid hsla(0,0%,0%,.25);
border-radius:10px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;}​
#b1{background:#000;}

<div id="konten">
<ul>
<li><a href="#b1">Contoh1</a></li>
<li><a href="#b2">Contoh2</a></li>
<li><a href="#b3">Contoh3</a></li>
<li><a href="#b4">Contoh4</a></li>
</ul>
<div id="b1">
<p>Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1Contoh1</p> </div>
<div id="b2">
<p>Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2</p>
</div>
<div id="b3">
<p>Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3</p>
</div>
<div id="b4">
<p>Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4</p>
</div>
</div>

Selamat Berkreasi :D

Thank's for Colouring my Life

Thank you for coloring my life, thanks to my friends who always support me, a close friend or friends facebook. once again I thank you, without you my life may not be colored

Cover Majalah!

I Love Indonesia

fear
arrogant
unfair
corrupt
traffic jam
disrespect
stuck
poverty
riot
conflict
uncomfort

CSS3 Button Facebook

CSS3 Facebook Buttons

The easiest way to make people think: "Wow, this app must be as good as Facebook!".

Buttons

To create the default "button" add a class of uibutton to any appropriate element. To create the blue variant include an additional class confirm. To create the green variant include an additional class special.

<a class="uibutton" href="#">Button</a>
<button class="uibutton" type="submit">Button</button>
<input class="uibutton" type="submit" value="Button">

Change picture

Request an invitation

Larger buttons

To create larger buttons inclue an additional class of large.

<a class="uibutton large" href="#">Search</a>

Search

Share

Request an invitation

The CSS

The CSS this Buttonuibutton-group.


/*BUTTON */
.uibutton { 
position: relative; 
z-index: 1;
overflow: visible; 
display: inline-block; 
padding: 0.3em 0.6em 0.375em; 
border: 1px solid #999; 
border-bottom-color: #888;
margin: 0;
text-decoration: none; 
text-align: center;
font: bold 11px/normal '
lucida grande', tahoma, verdana, arial, sans-serif; 
white-space: nowrap; 
cursor: pointer; 
/* outline: none; */
color: #333; 
background-color: #eee;
background-image: -webkit-gradient
(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
background-image: -moz-linear-gradient(#f5f6f6, #e4e4e3);
background-image: -o-linear-gradient(#f5f6f6, #e4e4e3);
background-image: linear-gradient(#f5f6f6, #e4e4e3);
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#f5f6f6', 
EndColorStr='#e4e4e3'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
/* IE hacks */
zoom: 1; 
*display: inline; 
}
.uibutton:hover,
.uibutton:focus,
.uibutton:active {
border-color: #777 #777 #666;
}
.uibutton:active {
border-color: #aaa;
background: #ddd;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* overrides extra padding on button elements in Firefox */
.uibutton::-moz-focus-inner {
padding: 0;
border: 0;
}
/*Icons */
.uibutton.icon:before {
content: "";
position: relative; 
top: 1px; 
float:left;
width: 10px; 
height: 12px; 
margin: 0 0.5em 0 0; 
background: url(fb-icons.png) 99px 99px no-repeat;
}
.uibutton.edit:before  { background-position: 0 0; }
.uibutton.add:before  { background-position: -10px 0; }
.uibutton.secure:before  { background-position: -20px 0; }
.uibutton.prev:before  { background-position: -30px 0; }
.uibutton.next:before  { float:right; 
margin: 0 -0.25em 0 0.5em; background-position: -40px 0; }
/* BUTTON EXTENSIONS */
/* Large */
.uibutton.large {
font-size:13px;
}
/* Submit, etc */
.uibutton.confirm {
border-color: #29447E #29447E #1A356E;
color: #fff;
background-color: #5B74A8;
background-image: -webkit-gradient
(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
background-image: -moz-linear-gradient(#637bad, #5872a7);
background-image: -o-linear-gradient(#637bad, #5872a7);
background-image: linear-gradient(#637bad, #5872a7);
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#637bad', 
EndColorStr='#5872a7'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
}
.uibutton.confirm:active {
border-color: #29447E;
background: #4F6AA3;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* Special */
.uibutton.special {
border-color: #3b6e22 #3b6e22 #2c5115;
color: #fff;
background-color: #69A74E;
background-image: -webkit-gradient
(linear, 0 0, 0 100%, from(#75ae5c), to(#67a54b));
background-image: -moz-linear-gradient
(#75ae5c, #67a54b);
background-image: -o-linear-gradient
(#75ae5c, #67a54b);
background-image: linear-gradient
(#75ae5c, #67a54b);
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#75ae5c', 
EndColorStr='#67a54b'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 
inset 0 1px 0 #98c286;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 
inset 0 1px 0 #98c286;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 
inset 0 1px 0 #98c286;
}
.uibutton.special:active {
border-color: #3B6E22;
background: #609946;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/*BUTTON GROUPS */
.uibutton-group {
display: inline-block;
list-style: none;
padding: 0;
margin: 0;
/* IE hacks */
zoom: 1; 
*display: inline; 
}
.uibutton + .uibutton,
.uibutton + .uibutton-group,
.uibutton-group + .uibutton,
.uibutton-group + .uibutton-group {
margin-left: 3px;
}
.uibutton-group li {
float: left;
padding: 0;
margin: 0;
}
.uibutton-group .uibutton {
float: left;
margin-left: -1px; 
}
.uibutton-group .uibutton:hover,
.uibutton-group .uibutton:focus,
.uibutton-group .uibutton:active {
z-index:2;
}
.uibutton-group > .uibutton:first-child,
.uibutton-group li:first-child .uibutton { 
margin-left: 0; 
}
/* BUTTON CONTAINER */
.uibutton-toolbar {
padding: 6px;
border-top: 1px solid #ccc;
background: #f2f2f2;
}
.uibutton-toolbar .uibutton,
.uibutton-toolbar .uibutton-group {
vertical-align: bottom;
}

Grouped buttons

To created grouped buttons wrap them in an element, or use a list, given the class uibutton-group.

<div class="uibutton-group">
<a class="uibutton" href="#">Dashboard</a>
<a class="uibutton" href="#">Inbox</a>
<a class="uibutton" href="#">Account</a>
<a class="uibutton" href="#">Logout</a>
</div>
<ul class="uibutton-group">
<li><a class="uibutton" href="#">Dashboard</a></li>
<li><a class="uibutton" href="#">Inbox</a></li>
<li><a class="uibutton" href="#">Account</a></li>
<li><a class="uibutton" href="#">Logout</a></li>
</ul>

Mixed groups

To display a toolbar of buttons and grouped buttons, use a wrapping element given the class uibutton-toolbar.

<div class="uibutton-toolbar">
<a class="uibutton" href="#">Mark as unread</a>
<div class="uibutton-group">
<a class="uibutton" href="#">Report spam</a>
<a class="uibutton" href="#">Delete</a>
</div>
<a class="uibutton" href="#">Unsubscribe</a>
</div>

Buttons with icons

A range of icons can be added (only for links and buttons) by adding a class of icon and any one of the provided icon classes:

<a class="uibutton icon add" href="#">New message</a>
New message
Class Example
.edit Edit post
.add Add a photo
.secure Private account
.prev
.next

Browser compatibility

Full support: Firefox 3.5+, Google Chrome, Safari 4+, IE 9+, Opera 11.10+.

Note: Some CSS3 enhancements are not supported in older versions of Opera and IE. The use of icons is not supported in IE 6 or IE 7.