Wednesday, 27 June 2018 04:07

Styling an inline search form using flexbox

Styling search forms that have the input and button displaying inline can be a real pain. Sure, we can use the float property, but we would need to give each element a width. It's workable, but such a hassle to make it responsive. So here is a flex box solution that ensure each element of the form float next to each other and grows/shrinks as required.

Published in Blog
Tuesday, 08 May 2018 03:44

Modal Slide Up From Bottom

Here's a light weight code snippet that creates a modal popup that slides amd anchors from the browsers bottom edge.

https://codepen.io/shandb/pen/GdyKPm

Published in Blog

On the DJ Vadim website I needed to create a gallery of album covers that displayed each cover in a perfect square, but was also responsive and would resize dynamically on various screen sizes. I could have declared a whole variety of CSS values for each media breakpoint, but I wanted a much more elegant solution. I settled on the following:

Check the J Fiddle

The solution is to give the containing hyperlink for each thumbnail a width off 100%, and a height of 0. The square is calculated by a bottom padding of 100%. The image itself is applied as a background image to the hyperlink, and sized using the CSS property background-size.

Update:
While the above method works for containers that only hold a background image, as soon as content is put inside the container the height breaks (adding the height of the content to the dimensions of the container) and a perfect square is lost.

Here is another solution using flex box that can also perfectly center content within the container.

Published in Blog
Sunday, 23 August 2015 02:49

Overlay a featured flag using pure CSS

This is a usefull method for creating a featured flag overlayed on top of an image or content. The flag uses the CSS transform property, and is anchored to the left corner so that it remains in the same position on all screen sizes.

Featured Flag using CSS transform with rotate

The HTML:

<span class="featured">
<span class="flag"> Featured </span>
</span>

The CSS:

span.flag {
background: #ff842c none repeat scroll 0 0;
color: #fff;
display: block;
font-weight: bold;
left: -45px;
padding: 10px 0;
position: relative;
text-align: center;
text-transform: uppercase;
top: 95px;
transform: rotate(-45deg);
transform-origin: left top 0;
width: 200px;
}

Check this JSfiddle example

Published in Blog