Category: CSS

CSS Odd even rows

Use the following CSS code to add a style to odd or even div elements or entries: .row{ &:nth-child(odd){   background-color: darken($grey,3%); } }    

Read More

Responsive YouTube video embed in page, get the ratios right

Use the following code to embed your YouTube videos in your page.

Read More

Center DIV vertically within another DIV

This is one way to center a DIV vertically, however, this is not compatible with IE8 to all our disadvantage is still in use in 2017.

Read More

CSS Transition

Using CSS transition makes things super easy to animate objects with just some simple CSS. Note that this is not supported in IE9.

Read More

Getting input and textarea fields to match up in width.

Both input and text area fields seam to use different measures of width. To get them to match up add this to the style of a Text and Input fields: width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; Now the width of both Input and Textarea will be of 100%…

Read More

Adding text to a tag using CSS

Add extra content before or after a div.

Read More

Drop shadow

Text Shadow name-of-div { text-shadow: 2px 2px 2px #ff0000; } text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit; Box or object based shadow Outer shdow .shadow { -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; } Inner Shadow .shadow { -moz-box-shadow: inset 0…

Read More

Changing the point at which Bootstrap Nav menus will collapse

Use the following code in your SCSS file that will allow you to change the max width at which a menu item is allowed to collapse. There is no need to edit the core bootstrap files. Place code in @media (max-width: 900px) { .navbar-header { float: none; } .navbar-toggle {…

Read More
© Toffy digital 2018 Powered by Toffy Digital