Latest CSS3 Recipes

CSS3 transform doesn't work on chrome

I have a simple code that works on Firefox and IE11 ,but it doesn't work on Chrome. it's a simple div that when the page loads it must 'fade in' and 'on click' must 'fade out'.
it's the code :

<div class="BoxContainer">    
      <div class="Box...

Read the entire recipe Recipe added 5 minutes ago

Bootstrap menu not working for WordPress

I have used nav walker for the wordpress menu with bootstrap. but this responsive menu is not working properly when I resize the window, the toggle button shows, but not function properly.. I created it with the help of an online tutorial. the site...

Read the entire recipe Recipe added 1 hour, 6 minutes ago

fail to change placeholder color with Bootstrap 3

Two questions:

  1. I am trying to make the placeholder text white. But it doesn't work. I am using Bootstrap 3. JSFiddle demo

  2. Another question is how do I change placeholder color not globally. That is, I have multiple fields, I want only one field to...

Read the entire recipe Recipe added 2 hours, 6 minutes ago

My Wordpress site crashes on Internet Explorer

I'm building a theme for Wordpress, but it seems it's not working on Internet Explorer, especially above IE 9.

Here is the site:

It looks like the background image doesn't resize automatically or something (I'm using CSS3 Media...

Read the entire recipe Recipe added 3 hours, 7 minutes ago

Which structure to use to recreate this Stackoverflow unit in bootstrap / css

Which structure should be used to create the following member profile unit in bootstrap.

  • Table
  • Div's that are floated left
  • or something else?

enter image description here

Read the entire recipe Recipe added 4 hours, 3 minutes ago

Code (CSS3 x jQuery) upgrade tips

I'm just beginning in web design, and I've come up with this code to scroll to a place in the same page.

I don't know if this can or should be improved much longer, so I'm asking for any tips that can make this code better.

(I know its messy,...

Read the entire recipe Recipe added 5 hours, 6 minutes ago

How to add semi-transparent highlight to text?

I am trying to figure out how to add some semi-transparent highlighting to text and have be able to change it's color. I have see it quite a bit lately and am wondering what would be the best way to go about it. So basically the highlight is like a...

Read the entire recipe Recipe added 6 hours, 4 minutes ago

How can I create an element in HTML/CSS with a semicircle border at the top?

I want to create an element in HTML/CSS like the following:

enter image description here

Basically, I want to create a semicircle in the top-middle with a border around it and then have a smaller circle within that semicircle with a single character centered within it (like...

Read the entire recipe Recipe added 7 hours, 6 minutes ago

keep link active after clicked using same page anchors

Bascally I have a fixed navbar with same page anchors and I'd like to keep the link active after the link has been clicked and taken to that section of the page. This is simple if the links to another page but I can't figure out how to here.


Read the entire recipe Recipe added 8 hours, 4 minutes ago

reducing the header/footer size in bootstrap navbar css

I am newbie to bootstrap css. Facing probelm in adjusting height of header and footer.

code for footer:

<div id="footer">
      <div class="container">
    <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">

Read the entire recipe Recipe added 9 hours, 5 minutes ago

ID Or Class in CSS when overriding an Input type?

Can someone explain me the difference between using ID's (#imAnId) and classes (.imAClass) ?

And what i should use when i'm overriding the main style?

As for now I did this in my css:

input[type=submit] {
    border: 1px solid #dcdcdc;

Read the entire recipe Recipe added 10 hours, 6 minutes ago

Best way to style a TextBox in CSS

I would like to hear what's the best thing to do with pure CSS.

The Situation:

I'm having a textbox in which i can search for specific items. Yet now i'm also having an advanced search with almost the same textbox yet the width of the...

Read the entire recipe Recipe added 11 hours, 5 minutes ago

jQuery X-Ray Effect to Reveal Data Points

I have a client who wants to have an X-Ray effect that reveals clickable data points. A slider would be used to move a viewing window over an image, that would reveal an x-ray, or secondary image as the slider is moved. I've adapted Eli Kirk's X-Ray...

Read the entire recipe Recipe added 12 hours, 2 minutes ago

How to only slide down current element

I have the following HTML.

<div id="myid">
   <ul class="someclass">
      <li class="static">
         <a href="#"><span>Page1</span></a>
         <ul class="someclass">
            <li class="static"><a...

Read the entire recipe Recipe added 13 hours, 8 minutes ago

How to make shapes with CSS which have borders?

I am looking for a way to make various geometric shapes using only HTML/CSS. I found my answer here, however it doesn't allows me to give borders to my shape. For instance I can get an inverted isosceles triangle using

#triangle-down {

Read the entire recipe Recipe added 14 hours ago

Html table with fixed header column and row without JS

I am currently trying to display correctly a sort of agenda which represents hours on the head row and different rooms on the head column.

I want to have fixed headers (first row and first column) and a scrollable table displaying whether a room is...

Read the entire recipe Recipe added 15 hours, 2 minutes ago

CSS3 wildcard selector as value

Is it possible to use a wildcard as a property value in CSS3?

I'm using LESS if that helps.

For example assuming class name is animation-delay-8

[class^=animation-delay-] {
    -webkit-animation-delay: // the value should be 8

Read the entire recipe Recipe added 16 hours, 7 minutes ago

Stop CSS3 animation jumping

I have the following fiddle (Wekbit/Chrome only).

Just watch the animation for a while and you will see it "stop" for a millisecond and then continues again. Could it be the svg file itself? If that is the case, how can I fix this file so the hiccup...

Read the entire recipe Recipe added 17 hours, 3 minutes ago

Create list with triangles on the right side CSS

Im trying to create a list like on the image, but I cant figure out how to do it. So far I've done this, but seems im not doing it right:

My work so far:

#side-menu li:nth-child(even) {
background: rgb(0,169,148);

Read the entire recipe Recipe added 18 hours, 7 minutes ago

What is significance of 'navbar-brand' class in Bootstrap 3

I am new to Bootstrap 3.0. Can any one tell me what is significance of 'navbar-brand' class in below code?

    <!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>

Read the entire recipe Recipe added 19 hours, 7 minutes ago

CSS full width header with different extremities

Header image

Hi all, I've been trying to make a header for a website I'm working on like the image above, the issue is I would like that the header fill 100% of the page width. is it possible to show me a way to do this in HTML5/CSS3 without using this image as...

Read the entire recipe Recipe added 20 hours, 2 minutes ago

Circle around :before element

Hello I'm trying to figure out the same question that what was asked in this thread How to use CSS to surround a number with a circle?

However - everytime I do it, the shape becomes oval, regardless if I add width/height or not...

I created a...

Read the entire recipe Recipe added 21 hours, 1 minute ago

How to make a login div ease in and bounce like this?

The login box flies from the top and the input fields animate with it until the bounce is over. It looks very cool to me.

I want to know how to make an effect like this. I think it's CSS3 animation. Is there any plugin or library for this?


Read the entire recipe Recipe added 22 hours, 6 minutes ago

Rotation of CSS arrow and javascript toggling

I have two div banners that have corresponding CSS arrows. When the banners are clicked, the javascript toggles between revealing and hiding the text underneath. Likewise, the respective arrows rotate down when the text is revealed and back up when...

Read the entire recipe Recipe added 23 hours ago

CSS positioning independently of other overlapping elements (without position: absolute)

I'm trying to create some cool CSS animated clouds. It works perfectly on modern desktop web browsers, but has issues with MobileSafari on iOS 7.

The code I'm using involves cycling clouds from margin-left 0% to 100%, to -100%, and back to 0%. This...

Read the entire recipe Recipe added 1 day ago