Viewport units: vw, vh, vmin, vmax - Web Design Weekly
The viewport is the area where the browser renders the site. This is your screen minus the reserved space of the browser chrome. Sometimes you want to size an element based on that viewport, like a sidebar. This can be done using a unit we’re all familiar with: percentages. Let’s set the height equal to the viewport.
CSS Decorative Gallery (adding frames and overlays to images using CSS and transparent PNGs/GIFs)
Did you like my previous CSS tutorial on how to create gradient text effects? I'm using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex).
CSS3 Gradient Buttons
Last week I talked about Cross-Browser CSS Gradient. Today I'm going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc.
Learn CSS Positioning in Ten Steps: position static relative absolute float
1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.
How to: CSS Large Background
Since I posted the huge collection of Large Background Websites, I received several email requests on how to make a large background site with CSS. So, I thought it would be a good idea to share my techniques on designing large background websites. In this tutorial, I will provide various CSS examples on how you can create a large background site using either a single or double images.
How do I get the value of the selected dropdown menu item with Angular?
Learn how to determine which dropdown menu the user selected in your Angular template, and get its value. Dropdown elements provide a way to give your visitors choices. Technically, a dropdown element is actually a select element and each menu item in the dropdown is an option element. In a pure HTML-based form, there is virtually no work to do; the browser takes care of all the heavy-lifting.
Video Screencasts
#130: First Moments with Grunt There are all these tasks that we need to do as front end developers. Concatenate and compress our files. Run our preprocessors.
4 methods of adding CSS to HTML: link, embed, inline and import
by Matthew James Taylor on 18 February 2009 There is more than one way to add a Cascading Style Sheet (CSS) to your HTML document. In this short tutorial I will explain the strengths and weaknesses of the four main methods.
