background preloader

CSS Triangle

CSS Triangle
You can make them with a single div. It's nice to have classes for each direction possibility. The idea is a box with zero width and height. Examples Dave Everitt writes in: For an equilateral triangle it's worth pointing out that the height is 86.6% of the width so (border-left-width + border-right-width) * 0.866% = border-bottom-width Related:  HTML5

CSS - Unordered List Styles (UL) Bullet lists in HTML come in two varieties: Ordered Lists (in which each line begins with a number or letter) and Unordered Lists (in which each line begins with the same bullet shape or image). On this page we will discuss how to format unordered lists so they have a bit more style. We'll also show you how to use an image for bullet lists. CSS Styles There are several ways to format the style of your lists but they all use the same basic set of instructions. font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 2em; These are just a small sample of the styles which are available. list-style-position: outside; list-style-image: url(arrow.gif); list-style-type: square; When formatting a list, you can choose as many of these styles as you like. Set the font face to VerdanaSet the font size to 12 pixelsSet the background colour to greyCreate a 6 pixel padding around the entire list More formatting options will follow later. Method 1: Universal Style Example

Compass Home | Compass Documentation Automatic Table of Contents Any long page of content with distinct and well marked up content can benefit from a table to contents. A table of contents provides a quick way to jump down the page to the desired section. Of course you can create a table of contents manually, but it may be smart to build it dynamically on-the-fly with JavaScript. This is true for several reasons: It's easier - write the JavaScript once and it can create the Table on Contents on every page you need it.It's more reliable - the JavaScript isn't subject to authoring errors.It's still accessible - A table of contents is good for the general concept of accessibility, but it is a bonus (not having it doesn't ruin the page) and nearly all screen readers run JavaScript. This kind of thing has been done many times and many ways. HTML: Headers and IDs A long page of different parts you wish to link to could be marked up a bunch of ways. <article><h3 id="question-one">Title of Question</h3><! A link like this: A list in that <nav>? Demo Share On

100 Awesome CSS/Javascript Plugins and Coding Techniques Writen by Bogdan / Comments Off on 100 Awesome CSS/Javascript Plugins and Coding Techniques If you know how to use CSS and Javascript, you can create some impressive websites. Not only that you can do some awesome stuff with them but they also ease you work. In this article you have 100 awesome CSS and Javascript plugins and coding techniques that should definitely be in you toolbox. Use CSS3 to Create a Dynamic Stack of Index Cards You will learn how to create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling). Dynamic PNG shadow position & opacity You will learn how to create a movable object using javascript. How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3 Awesome Overlays with CSS3 The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. Sliding Vinyl with CSS3

Create a Themable Button Set with Sass If you have yet to give Sass a try, don’t worry, this is a good place to start. And if you haven’t already read Andrew’s primer on Sass, give it a read for a better understanding of what we’ll be covering and how to get setup with Sass. In this article, we’ll start with one of the simplest design elements on a page –– a button. The buttons and color themes we’ll be creating What We’ll Cover We’ll be refactoring the CSS using the SCSS (Sassy CSS) syntax, which is closer to the pure CSS syntax we’re all used to. project/ index.html css/style.css scss/style.scss The “style.scss” file will compile into “style.css”, so that’s the only file we’ll need to link to in our HTML. nestingvariablesmixinscolor functionspartials Starting with the CSS Currently, our CSS is straightforward. All padding and border pixel units have been converted to em units so they scale relative to the button’s font size, which makes our button modular. In the HTML, we’ll add the .btn class to the element. Nesting Selectors

Ajoutez du style à vos listes ordonnées Ajouter des styles à des listes ordonnées a longtemps été une tâche difficile et piégeuse, je ne suis pas le seul à le penser. Pour donner un style aux nombres, vous devez d'abord supprimer le style par défaut du navigateur puis ajuster le code des éléments de la liste afin de leur donner le style approprié. Dans cet article, je vais vous montrer comment utiliser CSS3 pour améliorer la présentation de vos listes ordonnées en utilisant une approche sémantique. Cet article est la traduction de CSS3 ordered list styles publié sur Red Team Design. 2 commentaires Article lu 1939 fois. Lorsque j'ai lu pour la première fois l'article de Roger Johansson sur les styles des listes ordonnées, je dois avouer que j'ai tout de suite aimé sa technique. Vous pouvez déjà voir un exemple en ligne. Le balisage utilisé est tout ce qu'il y a de plus classique : Essayons d'expliquer simplement comment cela fonctionne. Nous allons utiliser le contenu généré, la numérotation automatique et les listes.

Quick CSS Trick: How To Center an Object Exactly In The Center I recently needed to make a placeholder page for a site. I wanted the logo image to be centered exactly in the middle of the screen, that is, both vertically and horizontally centered. Quickly, I thought I'd just give the image element a class of "centered" and then style that class: But as I'm sure you are thinking, this doesn't quite work. In order to get the image exactly centered, it's a simple matter of applying a negative top margin of half the images height, and a negative left margin of half the images width. That will do the trick: This works wonderfully when you know the size of the thing you are centering. The translate value for transform is based off the size of the element, so that will center nicely. Share On

clip-path | CSS Summary Initial value See the initial clipping path: 'overflow' and 'clip' properties Applies to all elements Inherited no Media visual Computed value Syntax clip-path: <uri> | none | inherit Values uri <uri> | none | inherit Examples Specifications Its extension to HTML elements is not yet present in any specification. Browser compatibility See also Document Tags and Contributors Document Object Model Traversal This chapter describes the optional DOM Level 2 Traversal feature. Its TreeWalker, NodeIterator, and NodeFilter interfaces provide easy-to-use, robust, selective traversal of a document's contents. The interfaces found within this section are not mandatory. A DOM application may use the hasFeature(feature, version) method of the DOMImplementation interface with parameter values "Traversal" and "2.0" (respectively) to determine whether or not this module is supported by the implementation. In order to fully support this module, an implementation must also support the "Core" feature defined defined in the DOM Level 2 Core specification [DOM Level 2 Core]. Please refer to additional information about conformance in the DOM Level 2 Core specification [DOM Level 2 Core]. NodeIterators and TreeWalkers are two different ways of representing the nodes of a document subtree and a position within the nodes they present. 1.1.1. Now let's remove "E". 1.1.2. ...

CSS Center Screen DIV All you need to center a div is some CSS. You may also want to check out my other articles on div positioning: full screen , top right corner , bottom left , and bottom right . You can click the following link to preview this CSS in action: Click here to preview center screen div The CSS Put this code inside the head tag: /*this is what we want the div to look like when it IS showing*/ div . centered { display : block ; /*set the div in the center of the screen*/ position : absolute ; top : 50 %; left : 35 %; width : 350px ; } </ style > This CSS positions the div at the very center of the screen. Now, just grab the XHTML for the actual div . The HTML Place this code inside the body tag: < p > Here is my div content!! CSS Walkthrough Let's do a walk-through of this easy CSS. This line makes it so that we can put the div anywhere on the page that we want. This line says to put the loading div 50% down the page--so, halfway down. So, it would follow that maybe we should set left:50% as well.