Subscribe

Archive | Css

Problem with Clear

I have new experience . that is problem with clear from css command . i meet this problem when I have new project from old client , he want to change something on his website. the website is so cool , and i decide to not touching the css core . the website has two […]

Use font with otf or ttf format

How to Use font with otf or ttf format , because that font is common format when we deal with font . below is working code how to do that with css and html , make sure the path is correct @font-face { font-family: lucida_sans_type_writer; src: url("font/LTYPE.TTF") format("opentype"); } @font-face { font-family: lucida_sans_type_writer; src: url("font/LTYPEBO.TTF") […]

Bigger when mouse hovers

If you wanna make your image bigger when mouse hovers it, like the one below you can do following <html> <head> <style type="text/css"> .wrap{ margin:0 auto; padding: 110px 0; width:85%; background: blue; box-shadow: 0 0 20px rgba(0,0,0,.5); } .box{ margin:auto; width:250px; background-size: 150px; } .mike{ display:block; width:100%; transition: 1s ease-in-out; } .mike:hover{ transform:scale(1.2); -webkit-transform: scale(1.2); […]

Useful :nth-child Recipes

I get a little giddy when I come across perfect uses for :nth-child or :nth-of-type (read about the difference). The better you understand them, the more css nerdgasms you get to have! In these simple “recipes” (really: expressions) I’ll arbitrarily use a flat list of list items and randomly chosen numbers. But it should be […]

All useful Css code

Below is group of useful Css or Html function which i often use it. ————————-How do I vertically align text next to an image with CSS————————– <!– moved "vertical-align:middle" style from span to img –> <div> <img style="width:30px;height:60px;vertical-align:middle"><spanstyle="dont_care">Works.</span> </div> This is taken from <a href='http://stackoverflow.com/questions/489340/how-do-i-vertically-align-text-next-to-an-image-with-css'>here<a> ——————————————How do make fancy image—————————————– .fancy_img{ padding: 8px 8px; /*It […]