SHH Design

About SHH Design

SHH design

sticky

Sticky Header and Nav with CSS and jQuery

Sticky Header and Nav with CSS and jQuery

It is becoming more and more popular to now have a sticky header and nav on your website. But what are these sticky elements? WEll let me explain in real easy terms. Sticky elements simply mean they stick to the screen, for example a sticky header and sticky nav will most of the time stick to the top of your window as you scroll down the page. Of course it does not have to be limitied to the top of your screen it can be on the sides or anywhere you need but “sticky” means exactly that they stick there. Continue reading

owl-zoom-image

Owl Carousel Zoom Image Function

Owl Carousel Zoom Image Function

So you have read my tutorial on how to implement and style Owl Carousel and now you would like to add a bit more functionality to it mainly being a zoom function to zoom into your images in your slider. No Problem! Let’s follow through how to do that. Continue reading

implementing and styling owl carousel

Implementing and Styling Owl Carousel

Implementing and Styling Owl Carousel

Owl Carousel is a fantastic and options packed responsive carousel plugin. I now use it for all my sliders and carousels as I can use plugin with a huge amount of options for both single slide sliders and carousels which is fantastic. It is also very light so it really is a win all round. Continue reading

pokemon

Draw using pure CSS and HTML

Draw using pure CSS and HTML

A fun tutorial this time round! I am going to teach you how to draw Pokemon characters with CSS and HTML. We will draw a Pokeball, Charmander, Bulbasuar and Squirtle using pure CSS and HTML. So this is going to be a fairly long but I think very rewarding tutorial (how could it not be when you end up with Pokemon characters!) We may even chuck in a little animation at the end just to make it even more fun you can see what we end up with here. So let’s not blather on any longer and get stuck in. Continue reading

picturefill

Fixing Picturefill Firefox Bug

Fixing Picturefill Firefox Bug

Firstly if you do not know what picturefill is I highly recommend checking it out here. I use picturefill a lot as I think it is fantastic and works generally really well. However recently when testing my site I was using firefox 38 and noticed that the slider I was using picturefill on was not responding correctly, if I shrunk in the screen it was not swapping out the image to a smaller version.

Continue reading

secrets about text decoration

What you might not know about text-decoration

What you might not know about text-decoration

The CSS style of text-decoration is used very often but only at a very basic level. This style actually has some hidden powers that could be very very useful for you.

Let’s explore what I have found a lot of developers did not know about text-decoration. Continue reading

responsive menu

Responsive Dropdown Multi-Level Menu

Responsive Dropdown Multi-Level Menu

Creating a responsive menu seems something really easy until you start getting into responsive multi-level dropdown menus. There are hundreds of plugins out there that can do it for you but you do not always need them (as good as some of them are), you can quite easily create one yourself without a lot of code. Continue reading

inline-block

Remove The Gaps On inline-block

Remove The Gaps On inline-block

When coding a menu or such like using lists a lot of us use inline-block to get the list items to sit next to each other. This is usually better than float as then it has an actual height on the page without having to use a clearfix. However it causes a lot of developers to have to be scratching their heads for a while or sometimes getting mad and crazy wondering where the heck that white space is coming from inbetween each element! Continue reading

gzip

Gzip with 1and1

Gzip with 1and1

When creating a WordPress site recently to make it load super fast I wanted to make the site served the content using compressed gzip files.  Not a problem I thought it uses apache so let’s just stick this in the .htaccess file:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

Continue reading

grid

Coding Your Own Responsive Grid

Coding Your Own Responsive Grid

So we all know the free responsive frameworks you can get out there and they are great! But they can be full of lots of code you will never use, so why not code your own basic responsive grid? It is easy and I will show you how.

Even if it is just to get a better understanding of how the frameworks work and for a better understanding of responsive web design this is a great exercise. Continue reading