Inline-block and white space in the grid
Searching for a long time and finally found the following: /** * [1] Reset the font-size to the root/default size. * Note: […]
Category: CSS
How to resize the Google reCAPTCHA for mobile devices
The only solution I found is the following CSS style: #rc-imageselect, .g-recaptcha { @media screen and (max-height: 600px) { transform: scale(0.95); transform-origin: […]
Change the first letter of a specific element
Let’s say you want to make all first letters of element with class big-title into red JS window.onload = function(){ var elements […]
Find the second last element with css
:nth-last-child(2)
Change input autofill color / yellow background
input:-webkit-autofill { box-shadow: 0 0 0 1000px #fff inset !important; }
Radial image cover
Your HTML markup <div class=”holder”> <img src=”http://lorempixel.com/500/500/sports/”/> <div class=”radial”></div> </div> Your CSS .holder { width: 500px; height: 500px; position: relative; } .radial […]
Burger menu button
Let’s say you need a burger button to toggle your primary menu which as the class primary-menu The HTML markup <span class=”menu-toggle” […]
Cross browser image grayscale filter
img.grayscale { filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’><filter id=\’grayscale\’><feColorMatrix type=\’matrix\’ values=\’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 […]
My favorite box shadow for overlays
My favorite box shadow for overlays is box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .2); See example in codepen: http://codepen.io/rizopoulos/pen/YqoaXe
Div with transparent background
Div with transparent background The div that has the background and the opacity needs to be positioned absolute with lower z-index that […]
Capsule shape using border-radius without a set width or height
Applying a very large border radius work on many browsers (IE9+, FF, Chrome) border-radius: 300px; Special thanks to Paris Kapsouros Example in […]
Vertical align center
If you want to align a div vertically center and you don’t know its height use the below code: .element { position: […]
Pulse animation
Create a circle and animate it forever! .cirlce { border: 1px solid #777; border-radius: 100%; height: 30px; width: 30px; background-color: #eee; animation: […]