CSS Vertical Align Div with CSS Table and Flexbox

Glenn Glenn's Blog Leave a Comment

A straightforward approach with CSS Table This approach has been around for ages, but is still rarely used over absolute div positioning. We simply add CSS table to the parent div and table-cell to the child div to be centred:- We’ve added tp optional elements here as other rules such as a left float may scupper the layout. CSS Flexbox Method Recently …

CSS Class Contains

Glenn Glenn's Blog Leave a Comment

Sometime you have classes like ‘myclass-1″ “myclass-2” and this may often be the case if you are using a WordPress plugin that spews out multiple divs with class names that are incrementally different. That can be a real pain, but thanklsfully you can still target them with a single line of CSS using the ‘CSS3 [attribute*=value] Selector’. Here’s the css:- In …

Full Screen Responsive Background Image with CSS

Glenn Glenn's Blog 2 Comments

Here is our CSS for a full-screen responsive background image that uses the css cover property. This means that the background image is full-screen, but also that it dynamically adjusts/crops so that there is no image distortion:- Basic CSS3 Implementation Here we are using the Background Shorthand Property and you could also add a background colour in this case. When …

Black and White CSS Hover

Glenn Glenn's Blog Leave a Comment

We’ve used various versions of jQuery and HTML5 to get Back and White images with hover. Here’s our preferred solution {here we are adding greyscale to ‘.item img’ so replace with your own element} … the problem with many of these approaches is that they break your preferred code structure. CSS would be a more elegant way of doing it …