All posts in HTML/CSS

On codrops : Login and Registration Form with HTML5 and CSS3

HTML5-CSS3form_codrops

With the CSS3 pseudo class :target  you can change CSS based on a targeted link < a href = “#mylink” > . I used the property to with some transitions to create a double login/scubscribe CSS3 HTML5 form. Both forms are in the HTML, the second is hidden until the users clicks a link that will target the second one. This used to be done in JavaScript but with CSS3 you can easily create the same effect in pure CSS3. … Continue reading

Using wp_reset_query() to make is_page_template() conditional tag behave with sidebar and footer.

One of the great features of wordpress is the conditional tags. Those are very powerful tags that you can use in templates to change content depending on a condition. There’s especially one very handful tag, when it comes to creating custom templates: is_page_template() . With this tag, you can check which template is being used by the current page. The use is quite simple: [php classname="myclass" collapse="false" firstline="1" gutter="true" light="false" padlinenumbers="false" smarttabs="true" tabsize="4" language="false"] is_page_template(‘MyCustomTemplateName.php’)[/php] (don’t forget the .php extension … Continue reading

Top sliding navigation using CSS3 and jquery

I was recently making some experimentation with the CSS3 transition, to create a sort of sliding menu.  The main idea was to have a menu composed of 4 items life tabs, dropping from the top of the website, with a sliding animation. See the example Download the files Using CSS3 transition and background-image position My first idea was to use a sprite like technique for the different tabs : one image, half hidden, and to show the entire image on … Continue reading

Flexible tabs menu using border-image css3 property

Don’t you get tired of the almost perfect rounded corners of border-radius? Don’t you sometimes wish to be able to create more complex shapes? Usually when we want to create more complex shapes, we have to use images. The problem is the lake of flexibility. In most cases you just create the shape large enough to enclose your whole biggest item. But what happens if a day you get an even larger one? Well you re-create the image larger? Here … Continue reading