Working on a WordPress project where client demands all images within a post should extend and touch window borders, actually full size images. The wrapper has margin of 20px on both sides and its not possible to remove the margin otherwise, all other elements will required 20px margin. I got this working with following JS code: $('.content img').each(function() { $(this).css({ 'position': 'relative', 'min-width': $(window).width(), 'margin-left': '-20px', }); }); In case you have better code for this and in CSS, please share.

Continue Reading

Today's freebie is pure CSS authentication forms. I've been working on a project and created these forms in HTML and CSS so why not share the code. The zip file includes login form, register form and reset password form. Feel free to make changes as per your requirements, enjoy and share. Download Now

Continue Reading

Today's freebie is a set of brand and social icons created with pure CSS. In fact, you can use the CSS code any web icon font. In this freebie, I've used fontawesome.io web font icons. This freebie includes HTML/CSS files for the icons in different shapes and sizes. Download Now  

Continue Reading

There are a few times when we want our website visitors to search content in just one category and not the whole website Today I am sharing a simple but effective UI trick to create a category based search box with CSS and jQuery Checkout this demo and then we'll dig into the coding part a class button info href http codepen io cssjockey full ILapH target blank Live Demo a h HTML h pre class lang xhtml decode true title HTML code lt div class search-box gt lt input type text value class search-input placeholder search gt lt div...

Continue Reading

strong Links Links Links strong That's what we have all over the internet On our website and blog posts we have a lot of links to point a user to another page Today I will share a small trick to stylise the links with CSS Animation That's what I've used on this website and you can apply the same as well to change the link color with style on hover h CSS Animation h With CSS animation we can add some effects when changing from one style to another without using any flash or javascript We will use CSS animation...

Continue Reading

Today we will play with jQuery CSS class methods such as strong addClass strong strong removeClass strong strong hasClass strong and strong toggleClass strong and learn some basic implementation to modify the HTML styles on the fly a class button info href http codepen io cssjockey pen HoBnv target blank Live Demo a h jQuery CSS Class Methods h Lets understand this a small piece of code First things first You must include the jQuery library in the span class lang xhtml decode true crayon-inline lt head gt lt head gt span tag pre class lang default decode true lt...

Continue Reading

In this tutorial I'll create a CSS Accordion without using any jQuery or Javascript As I mentioned in my previous post a title An easy way to create Tabbed Content with jQuery amp CSS href https cssjockey com code-snippets an-easy-way-to-create-tabbed-content-with-jquery-css target blank An easy way to create Tabbed Content with jQuery amp CSS a displaying a lot of information on one page is a bit difficult and we can use tabbed content or accordions to achieve the same without compromising on user experience We can always use jQuery to include nice effects on our css accordion However we are going...

Continue Reading

Tabbed content is a great way to handle a lot of information on a page without loosing usability and it provides great user experience as well Here's a real easy way to create tabbed content with jQuery and CSS h Let's create tabbed content with jQuery and CSS h img class aligncenter src https cssjockey com wp-content uploads tabbed-content-with-jquery-css jpg alt Tabbed Content with jQuery and CSS width height nbsp h Step Include the jQuery library h pre class lang default decode true lt script src ajax googleapis com ajax libs jquery jquery min js gt lt script gt pre...

Continue Reading

img class aligncenter size-full wp-image- src https cssjockey com wp-content uploads blurry-text-with-css jpg alt Blurry Text with CSS width height Its pretty easy to make some blurry text with CSS We can do it by just making the text color transparent and adding some text shadow Here's the code for the same h Blurry Text with CSS h To do it on normal text we can create a class and use SPAN tag to make the text blurry strong Example strong span class blur This text will be blurry span h HTML Code h pre class lang default decode true...

Continue Reading