Latest CSS3 Recipes

How to create a caption for a pure CSS/HTML Slider with thumbnails, no java/jquery

I'm trying to create a slider that has image thumbnails that you use to navigate with. I also want to create a caption for each slide, to appear and disappear with their specific slides.

This is what I have at the moment, ...

Read the entire recipe Recipe added 44 minutes ago

CSS3 Transition Keeps Resetting Rotation

I have a CSS3 Transition but right at the end of the transition my rotation resets to normal state. The HTML and CSS are simple:

HTML

<a href="#"><span></span>Test</a>

CSS

a {
    text-decoration: none;
}
a span {
    display: inline-block;
   ...

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

How to remove the space between two &lt;span&gt; tags?

I have a list of spans. In the HTML file, it is nice to list these <span> tags in different lines for readability and maintenance as follows:

<span><a href="some link">A link</a></span>
<span><a href="some link">A link</a></span>
<span><a href="some...

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

Scroll background in fixed element?

I'm trying to get the background of my fixed element to move (change background-position)
while scrolling the page down.

FIDDLE

I've made a small animation to demonstrate the effect I want.


CODE:

#nav-container {
position: fixed;
top: 0;
left:...

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

Header is coming underneath the lightbox

header is coming underneath the lightbox when scroll any way to get that header above the light box http://csdm4.com/design-build/

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

CSS transition doesn't work in FF when add overflow hidden on event

I have some problem with overflow hidden and CSS transitions. The transition animation works fine until code is added to set overflow: hidden on the <body> element. If that happens, the transition animation does not work; the element just changes...

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

How to change float div order without any change in html?

I have 3 float Divs in the following order.

(1) (2) (3)

And I want to change the order of the Divs as following

(2) (1) (3)

Please guide me how can I achieve this?

Fiddle Example:

Code:

<div class="div1">1</div>
<div class="div2">2</div>
<div...

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

Make box vertically in middle

How i make div with different sizes vertically in middle of page.

For example with 100px height.

like windows 8 messages.

Thnk you. Mohammad.

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

Set a &quot;max-width&quot; to a background image for larger devices

I have set a background image to a div but I don't want it to exceed 1600px in width. For example, if it's displayed on a device that is wider than 1600px, I don't want the background image to cover the entire width. Is there a way I can achieve...

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

How to center a text one the same line where there is some text on the left

I have a footer div with 2 texts parts. I want the first one to be on the left side, and the second to be in the middle - and it's position wont be disturbed by the screens page.

(image: move the red part to the pink one.)

enter image description here

I made a jsfiddle...

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

Clip HTML element without reflow

I want to clip the content of an HTML element in an animation, but without triggering reflows. Anyone know if it's possible? Take this example (fiddle):

<div>
    This is a div<br>
    With some content<br>
    Moar moar moar<br>
    Yolo<br>
   ...

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

Cross Browser / Mozilla issue

I am making my CV in a website here is the link http://anaxshipping.com/georgepkcv/studies.html

If you open it with latest Chrome the first section "Studies" with the 2 images Athens,Vilnius it appears as it suppose to be.

If you open it with latest...

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

Can I use media queries to effectively create a separate mobile site?

I have decided that its probably better to have a responsive site as opposed to a m.domain separate one. However, I do actually want the mobile version to display at a really stripped out level: http://i.imgur.com/oF7uJwm.png. Is it possible to strip...

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

Only displaying section of border on a round image set by border radius

I have an image, made round using border-radius and have applied a border to the now round image. I only want to display the border on the top half (or a specific section) of the image.

Here is a jsfiddle I've mocked up to demonstrate what I am...

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

Difference between LinkURL and Permalink at Tumblr

What is the difference? permalink seems to work perfectly.

<div class="tumblr-photo">
<a href="{permalink}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" /></a>

LinkURL generates my blog link. Only goes back to the front and not into the post.

<a...

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

Issue on Targetting A Bootstrap Modal CSS Class With Specific ID

Demo

I need to change only the background of one of the Modals with specific ID #firstModal which I am using in Bootstrap 3 by using this CSS rule

  #firstModal.modal-backdrop  {
     background-color: green;  
     opacity: 1 !important;
    ...

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

JS created html links won't open in chrome?

<a href='http://www.xyz.hu/xyz' alt='Kosár' title='Kosár'>Megtekintés</a>

Also: - A setinterval refreshes the sibling's content every sec, shouldnt matter for this element, i disabled it and still wont work. - it has a css3 transition effect on it...

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

jquery single var for two ids

I have two variables for two different classes. I want to assign single variable two both classes.e.g, the classes "signup" and "join" should be accessed using single variable like singup.

<head>
<script>

    var signup = $("signup");
    var...

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

&lt;ul&gt; Navigation Bar Not Displaying Correctly

I've created a navigation bar using an <ul>. The issue is that the <ul> isn't containing the items correctly, yet it's still affects their positions. When highlighted, you can see the the <ul> sits above the <li>'s.

Extra: The width of the <ul>...

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

jQuery animation of large image moving choppy

http://henrybuiltfurniture.com/new/furniture.php?p=wave-stool

I have a series of large images that I need to transition between smoothly (not necessarily with jquery - maybe I could use css3 somehow?) and I can't seem to do so with jQuery.

Here's...

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

CSS 2-color border

I'm interested is it possible to make css image border the way it shown on the image? thanks a lot. Maybe put some div under the image? Any thoughts?

2-color border

<img src="http://i.stack.imgur.com/3s43x.jpg" width="400" height="400" alt="">

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

Twitter Bootstrap 3 form-horizontal collides with sidebar

I want a horizontal form using bootstrap, but the second input is too wide, so it's below the sidebar. Why?

http://jsfiddle.net/58szw1w2/

The Markup:

<div id="sidebar">Sidebar</div>
<div id="content">
    Form from the <a...

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

How to create dropdown with multiple columns?

I am trying to create a dropdown menu in CSS, however it will have about 21 sub-items. I would therefore like to display them in 3 columns of 7, however I cannot figure out how to do so.

I have created a jsFiddle with a simple example, how can I...

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

Align Text/Content center inside DIV tag

I am designing a page with tile contents. I was able to position the tiles center but couldn't do that with its content. The tiles content's vertical alignment is centered but the horizontal alignment is aligned towards left. Any tweaks that I am...

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

How to Pass Numbers in Bootstrap 3 Glyphicons

Is there any option or solution to pass Numbers is Bootstrap 3 Glyphicons like

enter image description here

Thanks

Read the entire recipe Recipe added 1 day ago