KAWAII LADY ♔

Saturday, 29 December 2012

Vintage background

5 Comment(s) so far

Assalamualaikum dan hai semua... Hari nie semangat pulak nak update freebies...

If you want to copy image url...

Firstly click image --> Right click --> Copy image url / Copy image location...

If you want to save the image...

Click image --> Right click --> Save image as...

Tak payah credit... comment jer.. ^^,

Jangan re-freebies...

Thursday, 27 December 2012

Zoom in and zoom out image hover

1 Comment so far

Assalamualaikum...hari nie saya nak buat tutorial tentang zoom in dan jugak zoom out image hover... 2 in 1...

Firstly as usual : Dashboard --> Template --> Edit HTML

For template designer : Denim,simple,watermark...
Search the code img{ or img { or a img { then, replace the code with the code I have given below...

For classic template and blogskin...
Search the code img{ or img { then, replace the code with the code I have given below...

If there is no code like above add the code that I have given before </style> for blogskin and before
]]></b:skin> for template designer.

ZOOM IN...

img{

-webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -o-transition: all 1.5s ease;

}

img:hover{

-moz-transform: scale(1.2);

-o-transform: scale(1.2);

-webkit-transform: scale(1.2);

}

ZOOM OUT...

img{
-webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -o-transition: all 1.5s ease;
}
img:hover{
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-webkit-transform: scale(0.8); }
}

Jadik tak? mestilah jadik kan? ;D kalaw tak jadi jangan malu untuk bertanya...

Monday, 24 December 2012

Reflection image hover

Be the first to comment!

Assalamualaikum and hello everybody ... today I want to make a tutorial about reflection effect on image...for example try hovering over the image above...

Firstly as usual : Dashboard --> Template --> Edit HTML

For template designer : Denim,simple,watermark...
Search the code img{ or img { or a img { then, replace the code with the code I have given below...

For classic template and blogskin...
Search the code img{ or img { then, replace the code with the code I have given below...

If there is no code like above add the code that I have given before </style> for blogskin and before
]]></b:skin> for template designer.

img{

padding:4px;

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)))

-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;

}

img:hover{

opacity: 1;-webkit-box-reflect: below 0px

-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));

}

Done? do comment if you do not understand anything...^^

Blogskin : Nature friend

21 Comment(s) so far

My blog skin are free to use...You don’t have to pay anything :-)
But because of this, they come with rules.Please follow the rules as I have put in a lot of effort into creating the best blog skin I can for you guys.

What you can do to this skin...

✔ edit the theme as much as you like

✔ move the credits onto another page within the blog ( make it visible)

What you can't do to this skin...

✘ Remove any credit in the skin

✘ Steal or claim my blog skin as your own

✘ Redistribute my blog skin

✘ Use my skin as a base code for your skin

Preview / Code / Download

Features :

✿ Scalloped edged

✿ Comment box

✿ Navigation

✿ Follow/dashboard button

Do comments okay... ^^,

Wednesday, 19 December 2012

Scrollbar mine version

6 Comment(s) so far

Assalamualaikum... ok sekarang saya nak buat tutorial tentang scrollbar macam saya memandangkan ada yang tanya...saya rasa scrollbar saya ni biasa jer x chantek mane... ok mula-mula mcm biasa dashboard--> template search ::-webkit-scrollbar search guna ctrl+f...

kalau tak ada paste code yang akan saya bagi sebelum </style> bagi blogskin dan sebelum ]]></b:skin> bagi template designer...
preview here...

::-webkit-scrollbar {

width: 9px;

height: 9px;

}

::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {

height: 9px;

width: 9px;

display: block;

background: #FFC2E0;

border: 1px solid #FFA3D1;

}

::-webkit-scrollbar-track-piece {

background-color: #FFC2E0;

border: 3px solid #FFFFFF;

}

::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {

background:url(URL BACKGROUND);

border: 1px solid #FFC2D6;

}

Merah : code warna disini
Fucshia : url background...

kalau tak faham tanya taw...

Monday, 17 December 2012

Four navigation style

26 Comment(s) so far

Assalamualikum dan hai semua....setelah bereksperiment dengan kod akhirnya terhasilah empat style navigation ini... (over pulak)

boleh guna code ni tapi credit taw... penat saya ubah suai code...

This is an updated style on 11 October 2013

For blogskin / classic tempate paste the navigation code anywhere you want it to appear...for template designer Layout --> Add gadget --> HTML/Javascript

Live preview Here

Style number one

Style number two :

<style>

.haha{

width:60px;height:40px;

box-shadow:0px 0px 2px 3px #FFE9C6;

background:#FFF9E1;

font:12px century gothic;

text-align:center;

Text-decoration:none;

color:#888888;

display:inline-block;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

padding-bottom:5px;

padding-top:20px;padding-left:0px;padding-right:0px;

display:inline-block;

border-bottom-left-radius: 35px;

border-bottom-right-radius: 35px;

}

.haha:hover{

background:#FFFFFF;

color:#777;

border-top-right-radius: 35px;

-webkit-transform: rotate(-50deg) ;

-moz-transform: rotate(-50deg) ;

-o-transform: rotate(-50deg) ;

-ms-transform: rotate(-50deg) ;

}

</style>

<a class="haha" href="http://kawaiilady.blogspot.com/">About</a>

<a class="haha" href="http://kawaiilady.blogspot.com/">Stuff</a>

<a class="haha" href="http://kawaiilady.blogspot.com/">Linky</a>

</center>

Style number three :

Style number 4 :

<style>

.leaf {

width:45px;height:30px;

padding-top:15px;

text-transform:uppercase;

border: 3px solid #E2FFD5;

background:#E8FFE1;

font:11px century gothic;

text-align:center;

Text-decoration:none;

color:#333333;

display:inline-block;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

margin:3px;

display:inline-block;

border-radius: 100%;

border-top-right-radius:0px;

}

.leaf:hover{

background:#FFFFFF;

color:#000000;

border: 3px solid #E8FFE1;

background:#E2FFD5;

border-top-right-radius:100%;

border-bottom-left-radius:0px;

}

</style>

<a class="leaf" href="http://kawaiilady.blogspot.com/">About</a>

<a class="leaf" href="http://kawaiilady.blogspot.com/">Stuff</a>

<a class="leaf" href="http://kawaiilady.blogspot.com/">Linky</a>

</div>

</center>

Kalau dah jadi comment taw... kalau tak jadik pon comment jugak...