A Web Design & Development Blog

CSS Accordion

Below is an accordion that was created with css and html, no javascript or jquery required. The accordion uses the :target psuedo element in the css to target certain divs. There is also a target fix to avoid any jump when an anchor is selected. See the Pen CSS Accordion by pollardld (@pollardld) on CodePen.

... Full Post


Writing media queries with SASS can save you a lot of time and lines of code. Also, edits will be easy to implement. First we set our global variables. $i is the starting point, as i dont need media queries for 10 pixel screen. $x is our base em size. $i: 20; $x: 16; For […]

... Full Post

CSS Animation Axis

mixin takes width, height and color, then fixes the animation axis to the top left. This could be done for any axis point, and further mixins could be made to expand on this idea. co-developed with Thom Griggs See the Pen titanis walleri by pollardld (@pollardld) on CodePen

... Full Post

Animated Search

The maginfy glass will move from right to left when search is in its focus state. Pretty easy to do. Just add your search input, use a background data uri, and transition its position on focus. Thats it. Check it out See the Pen Animated Input Search by pollardld (@pollardld) on CodePen

... Full Post