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 Carousel Zoom Image Function
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
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
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 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
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
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
Flexslider Zoom Using Elevate Zoom
So after I did my intial blog post Implementing, Styling and Extending Flexslider I had a lot of people coming to my site searching for a zoom function with flexslider. So I wrote the article Flexslider With Zoom Image Function. This also raised more question from users asking about using ElevateZoom with Flexslider. Sooo I have now created a couple of examples that do just that! I know I know I am too good to you guys! Continue reading
Flexslider With Zoom Image Function
“Flexslider zoom” has become the most googled term for people reaching my site and going to my blog post Implementing, Styling and Extending Flexslider this probably wasn’t what you lovely people were looking for (however lovely and useful that post may be), So I thought why not give the people what they want, a working flexslider responsive slider with zoom capabilities!.