Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Sunday, September 28, 2014

All You Need To Know About Vertical-Align

Vertical-Align

Often I need to vertically align elements side by side.

CSS offers some possibilities. Sometimes I solve it with float, sometimes with position: absolute, sometimes even dirty by manually adding margins or paddings.

Friday, June 20, 2014

Buttons With Icons Using CSS

Buttons With Icons Using CSS

Buttons always plays an very important role in any website so that any user can make some action. To make the buttons more appealing, it's a great idea to use buttons with icons on website. Icons actually make the buttons more appealing and reflects the significance of after-click effect.

Saturday, May 24, 2014

Morphing Buttons Concept

Morphing Buttons

Some inspiration for a morphing button concept where the action element (button) morphs into a component. The examples show different types of components, i.e. fullscreen overlay, modal window, sidebar and more.

Thursday, May 08, 2014

7 Things You Didn’t Know You Could Do with CSS

7 Things You Didn’t Know You Could Do with CSS
CSS and JavaScript, believe it or not, are starting to overlap as CSS adds more functionality. When I wrote 5 Ways that CSS and JavaScript Interact That You May Not Know About, people were surprised at how CSS and JavaScript have come to overlap. Today I will highlight seven tasks you can accomplish with CSS -- no JavaScript or imagery required!

CSS @supports

Every good front-end developer feature-tests before using features which a browser may not have. Feature testing has always done with JavaScript, and many people use Modernizr, an impressive utility packed with loads of well-tested routines, to do that feature testing. A new API, however, has come along to let you do feature tests with CSS: @supports. Here are a few samples of how @supports works:

Saturday, May 03, 2014

Off Canvas Menus with CSS3 Transitions and Transforms

Off Canvas Menus

Off Canvas Menus are used primarily with Mobile and touch devices and can provide an extremely useful and beautiful experience for your users. This tutorial will cover an introduction on them, a getting started guide, some improvement tricks, and then finally some awesome demos for you to build off of. Instead of JavaScript, we'll use CSS3 Transitions and Translations for the animation making them smoother, better performing, and easier to tweak and customize.

Thursday, May 01, 2014

DRY-ing Out Your Sass Mixins

Sass Mixins

One of the most powerful features of the CSS preprocessor Sass is the mixin, an abstraction of a common pattern into a semantic and reusable chunk. Think of taking the styles for a button and, instead of needing to remember what all of the properties are, having a selector include the styles for the button instead. The button styles are maintained in a single place, making them easy to update and keep consistent.

Monday, April 28, 2014

12 Little-Known CSS Facts

12 Little-Known CSS Facts

CSS is not an overly complex language. But even if you've been writing CSS for many years, you probably still come across new things — properties you've never used, values you've never considered, or specification details you never knew about.

Sunday, March 30, 2014

Rotated Table Column Headers

Rotated Table Column Headers

Say you have a table header (i.e. <th>) of "Number of Howler Monkey Species by Country" and the data in the corresponding <td> is like "3". That's an awkward mismatch of width.

Sunday, March 23, 2014

Style External Links Differently

Style External Links Differently
When you are writing content on your website there will be times when you want to refer to other content on the internet, this can be to either your own articles or to external sources for other people's content.

When you link to external content it's common practice to open this content up in a new tab, this way the reader won't be taken away from there place in the article.

To open your links in a new window you can use the target="_blank" attribute.

<a href="url" target="_blank">External Link</a>

Tuesday, March 11, 2014

CSS 3D Folding List With Social Buttons

CSS 3D Folding List With Social Buttons

CSS 3D transforms are just awesome. I've seen before some cool and inspiring implementations in the wild and still I can't believe I didn't had the chance to write an article on this topic 'til now.

Tuesday, March 11, 2014

Simple Stack Effects

Simple Stack Effects

Today we'd like to share some inspiration for simple stack effects with you. You have certainly seen these kind of effects, mostly used in image galleries, but also on single items on a page: one item is shown initially and then, with some trigger, more items are revealed, normally as decoration.

Sunday, March 09, 2014

A responsive approach to image scaling with CSS

A responsive approach to image scaling with CSS

There was a popular article written a few weeks ago called "Vertical align anything with just 3 lines of CSS". This approach to vertically aligning things with top and translateY is something we've used recently, but in a little different context. We had to fit images into responsive containers that had fluid widths and set heights and all we knew were the widths of the images.

Monday, March 03, 2014

Create Different Styles of Hover Effects with CSS3 Only

Create Different Styles of Hover Effects with CSS3 Only

We started to see a lot of CSS3 animations around the web nowadays. Pure CSS3 animation such as flashing, fading, spinning, zooming, moving and a serial of complicated animations are emerging. What seems to be impossible to achieve with CSS only are now achievable fairly easily.

Sunday, March 02, 2014

Create a carousel out of nothing but CSS

Create a carousel out of nothing but CSS

You don't need JavaScript to build a carousel any more, Ben Schwarz introduces a CSS library that does the job.

Friday, February 07, 2014

Fullscreen Overlay Effects

Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays.

Fullscreen Overlay Effects

Friday, January 31, 2014

Scattered Polaroids Gallery

A flat-style Polaroid gallery where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides. Optionally, an item can have a backface which will be shown by flipping the Polaroid when clicking on the current navigation dot again.

Scattered Polaroids Gallery

Friday, January 24, 2014

CSS animation-fill-mode

We're always super excited to get into CSS animations because, quite frankly, they're incredibly awesome. One overlooked animation property, however, is the animation-fill-mode property. This CSS property sets the state of the end animation when the animation is not running. Here's a quick example:

Friday, January 24, 2014

Prevent common problems when writing CSS from scratch

Many times when I started writing the classes of a brand new site, I had two problems that bothered me very much: keeping the footer always at the bottom of the page - even if the page has few content - and using padding values in divs without influencing the overall width of the div.

Then I decided to always put the same basic classes on the css file, no matter what the layout would look like:

Wednesday, January 15, 2014

SVG Hover Effect

Sunday, January 12, 2014

Simple Responsive Grid

Simple Responsive Grid

A simple responsive grid layout with minimal markup.

<div>Simple Responsive Grid</div>
  <span class="grid">
    <div class="unit-2">Simple Responsive Grid</div>
    <div class="unit-2">Simple Responsive Grid</div>
        
    <div class="unit-3">Simple Responsive Grid</div>
    <div class="unit-3">Simple Responsive Grid</div>
    <div class="unit-3">Simple Responsive Grid</div>
        
    <div class="unit-4">Simple Responsive Grid</div>
    <div class="unit-4">Simple Responsive Grid</div>
    <div class="unit-4">Simple Responsive Grid</div>
    <div class="unit-4">Simple Responsive Grid</div>
  </span>
    
<img src="http://placehold.it/400x300">
  <span class="grid">
    <img class="unit-2" src="http://placehold.it/400x300">
    <img class="unit-2" src="http://placehold.it/400x300">
        
    <img class="unit-3" src="http://placehold.it/400x300">
    <img class="unit-3" src="http://placehold.it/400x300">
    <img class="unit-3" src="http://placehold.it/400x300">
        
    <img class="unit-4" src="http://placehold.it/400x300">
    <img class="unit-4" src="http://placehold.it/400x300">
    <img class="unit-4" src="http://placehold.it/400x300">
    <img class="unit-4" src="http://placehold.it/400x300">
  </span>

div {
    font-family: monospace;
    text-align: center;
}

div, img {
    width: 100%;
    font-size: 80%;
    margin-bottom: 10px;
    color: white;
    background-color: black; /* optional border color */
    padding: 10px; /* optional border width */
    box-sizing: border-box;
}

.grid {
    display: block;
    margin-left: -10px;
}

.unit-2, .unit-3, .unit-4 {
    float: left;
    border-left: 10px solid transparent;
    box-sizing: border-box;
    background-clip: padding-box;
}

.unit-2 { width: 50%; }
.unit-3 { width: 33.3%; }
.unit-4 { width: 25%; }



via CSS Deck by