Below you will find pages that utilize the taxonomy term “CSS”
This example shows how to modify an elements border without changing the size of the element in the DOM. This can be accomplished by using the
box-shadow css property to create the added border width on hover. Unlike a
box-shadow does not take size in the DOM, and therefore will not affect the positioning.
Designs typically require more than the out of the box demos provide, which is understandable. The slick carousel demos will get you most of the way there and provide examples for various settings. This post is an example of how to dynamically update the slick
slidesToShow value as the viewport is resized, demo.
This post documents how to create a fully responsive flexbox content layout that contains a pure CSS open/close toggle for the left and right sidebars. The CSS is built from Sass using Webpack with Autoprefixer. For development, a Webpack Dev Server is included.
This code sample shows how to create responsive sidebars that can be toggled open or closed in wider desktop layouts. In a mobile layout, they become columns below the article content.
This code sample shows a CSS only solution to define different styles for an element based on the total number of elements. This is handy when you have dynamic list content and want to style it differently for a certain number of list items.
This code sample shows how to animate a background image using CSS.
This code sample shows how to create hotspots for a responsive image entirely in CSS and HTML. When the image scales according to changes in viewport width, the hotspots and their respective tool tips will move accordingly.
This will center the image inside of a element when the elements height and/or width is smaller than the image. This works well when you have image assets of various aspect ratios that you want to display as thumbs that are the same size.
The list of web “X11 colors” from the CSS3 specification, along with their hexadecimal and decimal equivalents, is shown below, compare the alphabetical lists in the W3C standards. Note that this includes the common synonyms: aqua (HTML4/CSS 1.0 standard name) and cyan (common sRGB name), magenta (common sRGB name) and fuchsia (HTML4/CSS 1.0 standard name), gray (HTML4/CSS 1.0 standard name) and grey.
During module development, to see all of the js and css files in firebug or your favorite client debugging tool of choice, turn off the file combination provider. In this section at or near the bottom of your web.config, set the provider enableCompositeFiles attributes from true to false as shown in the example below.
This Tutorial is written with Drupal 7 in mind. However, it can be applied to any website.
Tips, Examples and Resources