Knowledge should be free and accessible
There is a bug with displaying SVG on Safari.
The fix is to wrap SVG in object.
<object> |
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg> |
|
</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; |
|
} |
This example is perfect for schedules and ect… This example is downloaded from http://tympanus.net/Tutorials/StickyTableHeaders/index3.html
It is really simple to create parallax effect on your site. Add this script to your html head.
<script> |
|
function onLoad() { |
|
window.onscroll = function() { |
|
var speed = 4.0; |
|
document.body.style.backgroundPosition = "center " + Math.round(-window.pageYOffset / speed) + "px"; |
|
} |
|
} |
|
</script> |
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;} |
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;} |
Hello, I will provide you with basic bootstrap template with great reservation popup.
This template contains:
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
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;} |
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.