Latest CSS3 Recipes

Why does 100% width on inputfield/textfield overlap containing div?

Why does 100% width on an inputfield/textfield overlap the containing div?

http://jsfiddle.net/lassebjensen/Uujck/3/

Css:

.red-div-400px{
    background-color:red;
    width:400px
}

.input{
    width: 100%;
    min-height: 28px;
}

Html:

<div...

Read the entire recipe Recipe added 29 minutes ago

How to select the first element of n&gt;4 elements with CSS only?

I'm playing around with nth-child selector.

Say I have grid with rows of 4 elements each and my first and last element have classes of ui-first-child and ui-last-child respectively:

<ul>
 <li.ui-first-child>
 <li>
 <li>
...

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

How to achieve smooth transition between webpages?

I am trying to create a small site(~5 pages, largely static) and want to implement the transitioning effect achieved in massivehealth.com. I have tried to search for it but in vain. I observed that the site is using only one script and although the...

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

jQuery dropdown delay on hover not working in bootstrap

I got the delay working using the jQuery script, but I needed to change my html so its now not the bootstrap standard dropdown, however its only a few positional changes and class changes so not sure why it's not delaying. I want the delay to be on...

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

Twitter Bootstrap when mobile smaller margin for container

Yesterday I started my first bootstrap dev day. As a designer this looks like one super framework to work with but I have one problem:

As a app designer I know how important readability is on mobile devices. The bootstrap framework autosize the...

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

Rule of thumb in Dividing CSS into Layout and Theme

I would like to separate my layout CSS from my theme CSS. However, I am kind of not sure exactly where certain properties such as padding, margin, width, or height belong too. I can see them belonging to either file. Was wondering what is the general...

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

dynamic part of the page breaks the layout

Good day! The following layout which I will post almost works. Almost. A part of the page is being dynamically loaded. If it loads few elements (0/1/2/3) It is alright. If it is more, the footer of the page isn't pushed back. (which basically is the...

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

Deactivate default styles in non-webkit browsers

I tried to customise form inputs in my web-app, and to do this I had to clear default browser styles with

-webkit-appearance: none

So in Chrome and Safari I have nice looking checkboxes, radio etc. But in FF and Opera looks like both styles are...

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

Completely center form in navbar

What I've been trying to do is center the form (and the two icons beside it) dead center in the navbar.

I've used the below CSS property, however, it doesn't center it precisely.

text-align: center;

If you check in the JSFiddle below, it's not...

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

Change in button css very slow in iOS/Android devices for Phonegap app

I have designed a custom button using jquery mobile and css for my Phonegap mobile app. On clicking the button just toggles on/off states and the css class is changed. However the toggle/change is too slow on iPhone/iPad/Android devices. There is some...

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

CSS-only design for hashed border

Is it possible to do a design like this (the bordered edges) without using images, but using CSS only..?

One of our designers has fired it to me and I think it might be a photoshop border, but I want to avoid using an image if possible.

example of the border I want to recreate

Thanks in...

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

Fixed position of bottom content until top content height expands

I am looking for a css-only solution that will accomplish what's illustrated below. The area of concern here is the content to the right of the image.

Fig. 1

Ex 1: Minimal top content: When there is only one line of top content (shown as "hi" here) keep...

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

Center block (paragraph) inside div

There is example in JsFiddle .

Small description: Div is 300x300 but might be 500x500 or 100x100 in future (so need flexible solution) with background image (which is size:cover so don't care about size).

Inside this div there is <p> with hight of...

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

Automatically resize image effect in CSS3

I have an image of 200 x 200. I want my image to have 2 effects: 1. The image floats slowly into the center of the <div> (320x240px) 2. Right after that, it will automatically resize 50% (which is 100x100px) and float into left-bottom of the...

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

Vertical-align middle for block inside div

I'm having trouble with vertical-align: center for <p> inside <div> . There is nothing more to explain so I just link JSfidle I'm JSFiddle link

edit: please remember that there is `

.cover-price p{

    width: 100%;
    height: 50px;
   ...

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

Webkit: CSS3 2D transform Scale + cubic bezier issue (when argument &gt; 1)

I wanted to create a "bouncy" animation for an element using:

div{

  -webkit-transform:scale(0);
  -moz-transform:scale(0);
  -ms-transform:scale(0);

  -webkit-transition:all 0.4s cubic-bezier(0.57, 0.07, 0.44, 2);
  -moz-transition:all 0.4s...

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

How to bind click event on image added using CSS 'background-image' property in jQuery

Here is my fiddle link

I guess my question is clear by title itself. Still, what I am looking for is an way to bind click event on the image added using css's background-image property.

I know, I could have achieved the similar functionality (of...

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

Add div next to other centered div

I want to add a div to the right of other div which is positioned in the center. As shown in the image:

enter image description here

I have this html so far:

<div id= "top-menu-wrapper">
  <div id="top-menu">       
  </div>
  <div id="social">
  </div>
</div>

The...

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

css, ios, iPad, -webkit-overflow-scrolling: touch bug, large content gets cut off

I have a table with thousands of rows (2317 to be precise) with data coming from the database. I am putting this table inside a div so it is scrollable.

html:

<div class="longList">
  <!-- table with thousands of rows -->
</div>

css:

.longList...

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

When using :before on an element it becomes the first child of said element?

I've always used :before in CSS to mean put content before the selector. I've never had any problems with this, however, I've stumbled across something that is confusing me where a selector's :before is appending inside the element instead of coming...

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

Bottom fixed image, as shown in the attached screenshot

As shown in the screenshot below, I'd like to put a bottom fixed image, that should appear after (not over) some contents (a logo and a central description text). This image should fit the width of the screen.

I came up with these 2 wrong solutions....

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

How can I vertically align the text in an anchor tag?

The question is simple enough: how can I vertically align the text in an anchor tag?

Here's a picture of what's going on:

enter image description here

Specifically, note "Publisher Search," "Add a New Publisher," and "Edit a Publisher." I want the text to be vertically...

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

Virtual Handheld Device Testing

A service that I often use to see how well my efforts are shaping up in different browsers and OSs is BrowserStack. Does something of the same ilk exist for testing out the behavior of different mobile devices? Say for instance I want to check the...

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

Sluggish animations with CSS3 and jQuery for iOs

I'm about to create a webapp but when I've tried to animate some objects with jQuery or CSS3, they are sluggish, unfluid, like I have on my computer (or the iOs Simulator).

I think this is it because the iPhone is not enough powerful to animate...

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

Angular CSS Animation won't work

I have a system in place that retrieves dynamically retrieves stored messages from the server, the view for it is:

<div id= "messages" data-ng-controller="MessageController">
    <div class="message" data-ng-repeat="message in messages |...

Read the entire recipe Recipe added 1 day ago