jymden.com

css

  • (JS) Super simple slider/carousel/slideshow

    Here’s how you can make a super simple slideshow that changes slides on a timer interval. You could easily edit it so any other event, like a mouse click, will trigger the slide() function. You can see it in action HERE HTML [html] <div class="slider"> <div class="slide red"> <p>THIS IS SLIDE 1</p> </div> <div class="slide…

  • (CSS) How to center a div without width

    I needed to center a div with dynamic content, so I couldn’t set a fixed width. Since margin: 0 auto; really won’t do anything if the element doesn’t have a fixed width you can solve it like this: HTML [html] <div id="container"> <div class="centered">My dynamic content, that will be centerd</div> </div> [/html] CSS [css] .centered…

  • CSS3 box shadow

    A nice feauture in CSS3 is the box-shadow. Instead of working with tedious PNG-images you can add shadows to any element with the CSS property box-shadow. The syntax works like this: box-shadow: <offset-x> <offset-y> <blur> <spread> <color> <inset> The offset settings will set the angle of the shadow. Where it will be cast in relation to…

  • Super simple navigation menu

    Here is a super simple navigation bar. Customize it for your site, with colors and fonts. This is just a super simple base recipe: First the html: [code language=”html”] <ul class="menubar"> <li><a href="#">hem</a></li> <li><a href="#">info</a></li> <li><a href="#">tjänster</a></li> <li><a href="#">kontakt</a></li> </ul> [/code]