Latest CSS3 Recipes

Opaque text over transparent box

I would like to have opaque text within my transparent box. Here is a code-sample:

HTML:

<div id="Transparent_Box">                                          
    <div class="text">                                          
    <h1>Some opaque...

Read the entire recipe Recipe added 56 minutes ago

Set font-size based on container size via CSS3

Is there a way to set the font-size dynamically based on the containers size with CSS? At the momentan I'm using the following JS code to achieve this behaviour:

var cubeText = function() {
    var fontSize = parseInt($(".cube.avatar").width());
   ...

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

How can I avoid media query overlap?

The cascade is what makes CSS special and powerful. But in the case of media queries, overlap can seem problematic.

Consider the following CSS (continuing rules for CSS media query overlap):

/* Standard - for all screens below 20em */

body { color:...

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

breadcrumb not getting aligned center on changing the screen orientation

I've a set of icons at the top of the page. I want them to always aligned center. But when I change the orientation of the phone, icons get aligned to the left. Link to my page

<div id="breadcrumb"  data-theme="w">
            <div id="icon_01"...

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

Center Responsive DIV

I have the following code:

UPDATED:

http://jsfiddle.net/Zdevq/2/

.container {
  height: 100%;
  width: 100%;
  background: #eee;
  position: absolute;

}

.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;

 ...

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

Image overflowing

I'm writing a wordpress image slider for my wordpress site, the image on the slider keeps overflowing and falling on other content. I've tried the code else where on a plain html file it works fine but it does not work on the wordpress theme. I knwo...

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

Create CSS to enlarge checkboxes

I am trying to double the size of my checkboxes on a few pages. How do I make that happen in CSS? I don't want to style the hover.

Ideas?

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

nth-child not working

I have a list and need every other item on it to change color and remove its margin. I used the nth-child and it works perfectly on everything but IE7-8. I know that they don't support nth-child so i used Jquery.

I found this: :nth-child is not...

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

Font-Color change in an infinite loop

I have this HTML tag:

<div id="alert">Warning!!</div>​

And I want to give it an animation effect that changes its font color in a red - black infinite loop.

I tried using Webkit Color Transition Loop for background color with font-color:

#alert...

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

Using the android backbutton with Dojomobile and phonegap in worklight

Im creating an app (rather big one) with Worklight. When im testing the app in an android phone and press the backbutton it closes the app.. now i want it to go back one page. Right now the page navigation is with dojox mobile implemented system. this...

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

firefox transitions breaking when parent overflow is changed

i came across an issue today and it took me so long to debug, I couldn't find a solution anywhere online so I thought it would be useful to document

It seems that transitions do not work on Firefox if the parent's "overflow" property is changed...

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

How can you hide the title tag using CSS?

<article id="node-13" class="node node-article node-promoted node-teaser contextual-links-region clearfix" about="/fos/node/13" typeof="sioc:Item foaf:Document">

<header>

<h2 class="title" property="dc:title" datatype="">

 <a...

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

Can I :target parent elements?

I have a general purpose box. There are five smaller boxes in the middle of the main box. http://jsfiddle.net/zorikii/fKjET/

I would like the box in the middle to change background color when another box is clicked. My basic markup is as...

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

CSS Getting text to align properly in list with custom bullet

I am trying to get the text in my list to align properly, but I can't get it right.

enter image description here

As you can see the text is slightly off and starts at the "image bullet" baseline. I want it to be in the middle.

Source:

//CSS
ul  {
   ...

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

Fade Unfocused objects in CSS

I was wondering if it was possible to have a selection of three items, all of which have an opacity of 1 when they are not hovered over, and to some how have the other two items have half the opacity, or "fade", when I hover over one.

Here is what I...

Read the entire recipe Recipe added 14 hours, 56 minutes ago

Custom Chat box Scrollbar display always bottom

I have a custom chat box. I added overflow-y to scroll. Now whenever I write something in the text box, it appears in the scrollbar window. How can I make the scrollbar window show the last message which I write, in my case it always shows the top.

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

Can (Html5,javascript,css3) app will work perfectly on ios and android

I am building a site in Html5 , css3 , javascript and node.js for server side . I want to know that will this app work perfectly on ios and android operating system devices , like ( iphone , ipad , htc , and other android phones ?

Please tell me so...

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

How to make and use LESS templates?

I want to get a general idea of how to make and use LESS templates. I'm guessing a template should consist of css rules which makes use of less @variables, and when you simply @import that template into another .less file that contains defined...

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

How do I increase the height of a menu divider in a navigation?

Here's what I got. I need to increase the height of the divider (|) in between the menu options. How do I do it so that it takes up the entire header area only?

HTML:

 <header>
 <img src="/images/logo.png" height="50px" id="front" />
 <nav>
...

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

Twitter bootstrap html select inside pagination component is offset and not aligned

When I try to use an html select inside of the pagination component the html select is offset and not properly aligned. I have only included the first half of the pagination with the html select inside of it for purpose of brevity. It should...

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

Bootstrap span2 not working

http://thegsx.com/bootstrap.htm

For some reason if I do span2 on the fluid-row it causes the div to be 100% wide and breaks the design

please help

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

z-index issue - positioning css3 triangle underneath menu

Hi and thanks for taking the time to look into my issue.

I am trying to implement a menu that looks just like this:

The main thing here is creating those triangles for either side, then positioning them underneath the menu to give it a 3d effect....

Read the entire recipe Recipe added 21 hours, 51 minutes ago

Cannot apply padding to &lt;b&gt;

Is there a reason why the padding-top is not working for the tag? See http://jsfiddle.net/MMwdR/

<b>hello world</b>​

b {
    padding-top: 100px;
}
​

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

Which property do I use to align my logo with my navigation?

I asked a related question a few minutes ago through which I got this updated code but I can't figure out how to get my logo to show up on the left hand side.

HTML:

 <header>
 <img src="/images/logo.png" height="50px" id="front" />
 <nav>
 <ul>
...

Read the entire recipe Recipe added 23 hours, 50 minutes ago

Text doesn't drop down a line, overflow:hidden, jScrollpane

I'm trying to use jScrollPane ( jscrollpane.kelvinluck.com ) to display a series of images, alongside a div horizontally. I managed to make the series of images work, but when I create the div, the content inside it either (a) goes outside the div, or...

Read the entire recipe Recipe added 1 day ago