CSS – Nikolay Nikolov blog

SVG on Safari

There is a bug with displaying SVG on Safari.

The fix is to wrap SVG in object.

CSS

object {
    width: 100%;
    display: block;
    height: auto;
    position: relative;
    padding-top: 100%;
}

svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

Sticky Header and Left column on a Table

This example is perfect for schedules and ect… This example is downloaded from http://tympanus.net/Tutorials/StickyTableHeaders/index3.html

StickyTableHeaders

How to create simple parallax effect.

It is really simple to create parallax effect on your site. Add this script to your html head.

In your body tag add -> onload=”onLoad()”. This will automatically start the script on page load. Here is some css you will need for example to work:

body{background: url("/image/bg-texture-1200.png") repeat-x top center; width: 100%;  background-color: #E9F5FA; background-attachment: fixed;}

Multiple background images in CSS

This example will show how to make multiple backgrounds for one div. It is perfect for headers and menus and it contains 3 parts ( left, middle, right ).

.box-header{background-image: url(images/left-orange.png),url(images/right-orange.png);background-repeat: no-repeat,no-repeat;background-position: 0% 0%, 100% 0%;height: 25px;line-height: 23px; text-align:center; width: 99%;margin-bottom: -14px;    position: relative; font-size: 15px; font-weight:bold; margin-top: 20px;}
.box-header::after{background-image: url(images/orange-mid.png); background-repeat: repeat-x;  display:block; width: 91.5%; content:""; height: 24px; margin-top: -23px; margin-left: 14px;}

Bootstrap startup template

Hello, I will provide you with basic bootstrap template with great reservation popup.
This template contains:

navigation bar with dropdown menu and popup box
carousel slider
several styles for content
fixed footer

Bootstrap is a really fast way to build responsive designs. Once you learn to use it, you will be impressed how good framework Bootstrap is.
Here is the link to -> documentation

Initial declaration in CSS

html,body,ul,nav,header,li,a{margin:0;padding:0;}
img{border:0;}
a{text-decoration: none;}
html,body{ font: 62.5% 'Georgia','Verdana',san-serif;}

Responsive design for all browsers and older versions of IE

If your task is to make your CSS media queries to work in most browsers and older versions of IE (7-8), all you need to do is to include Polyfills. Polyfills are js and you can download them from https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills. I can recommend you Respond by Scott Jehl.