Skip to main content

Home/ Web Development, Design & Programming/ Group items tagged selector

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Anton S.

SelectorGadget: point and click CSS selectors - 0 views

www.selectorgadget.com

great css webdesign tool javascript

shared by Anton S. on 27 Feb 09 - Cached
  • Anton S. on 27 Feb 09
     
    "SelectorGadget is an open source bookmarklet that makes CSS selector generation and discovery on complicated sites a breeze. Just drag the bookmarklet to your bookmark bar, then go to any page and press it. A box will open in the bottom right of the website. Click on a page element that you would like your selector to match (it will turn green). SelectorGadget will then generate a minimal CSS selector for that element, and will highlight (yellow) everything that is matched by the selector. Now click on a highlighted element to remove it from the selector (red), or click on an unhighlighted element to add it to the selector. Through this process of selection and rejection, SelectorGadget helps you come up with the perfect CSS selector for your needs."
  • anonymous on 03 Oct 13
     
    You can dating in here. This is a best site dating www.sugarhoneys4u.com www.killdo.de.gg
Saif Shuvo

Professional Web Design & Development Curriculum - 0 views

Lesson: 01 (Dreamweaver Basics & HTML) Introducing Dreamweaver, Elements, Attributes, Table, List, Forms, Formatting, Styles, Image, Hyperlinks. Head, Meta, Scripts, Layout, Fonts, URL- encode ...

webdesign web development

started by Saif Shuvo on 07 Jan 17 no follow-up yet
Soul Book

How To Use CSS3 Pseudo-Classes - Smashing Magazine - 0 views

www.smashingmagazine.com/...how-to-use-css3-pseudo-classes

css3 css html5 classes pseudo webdev webdesign pseudo-classes

shared by Soul Book on 08 Apr 11 - No Cached
  • Soul Book on 08 Apr 11
     
    "CSS3 is a wonderful thing, but it's easy to be bamboozled by the transforms and animations (many of which are vendor-specific) and forget about the nuts-and-bolts selectors that have also been added to the specification. A number of powerful new pseudo-selectors (16 are listed in the latest W3C spec) enable us to select elements based on a range of new criteria."
htmlslicemate.com

All You Need To Know About CSS3 Selectors, #1: Structural Pseudo-Classes - 0 views

www.noupe.com/...ural-pseudo-classes-77099.html

css3 Web designs

shared by htmlslicemate.com on 04 Jun 13 - No Cached
  • htmlslicemate.com on 04 Jun 13
     
    Today's front-end developers don't just need to understand how to write CSS, we need to know how to write it efficiently. And what "efficiently" means can depend on your project and environment. Perhaps you have a team with several members working in the CSS and you need an efficient way to work together. Or maybe you have a huge enterprise site and you need your CSS optimized for speed. You could even be working with a legacy system that restricts access to HTML, which means you need efficient selectors to effectively style elements without ids or classes. You might even face all these situations and more.
Sampath Kumar

What is specificity in CSS - 1 views

wikigurus.com/...What-is-specificity-in-CSS

design web development website webdesign programming tools web design company css

shared by Sampath Kumar on 03 Jan 16 - No Cached
Sampath Kumar liked it
  • Sampath Kumar on 03 Jan 16
     
    Specificity: Specificity describes about the priority of selector in CSS. Before working with CSS it is good to know about specificity. Because if the page contains few CSS selectors, then it is fine. But if we are dealing with a page which contains many CSS selectors, then we might confuse.
Laura Reed

Don't use IDs in CSS selectors? Oli.jp (@boblet) - 1 views

oli.jp/ids

css optimization web design css tool

shared by Laura Reed on 23 Mar 15 - No Cached
Tonny Mathews liked it
  • Laura Reed on 23 Mar 15
     
    "Recently I came across the post by Matt Wilcox called CSS Lint is harmful, ranting about the useful free tool CSS Lint. The "Don't use IDs in selectors" suggestion seems to have offended Matt the most, but I was surprised that many commenters also mentioned this as being a reason to avoid CSS Lint. This surprised me because smart people have been saying prefer classes to IDs for a while now. The article was light on reasons why this suggestion might be bad, but it boils down to....."
  • anonymous on 26 Oct 18
Jochen Burkhard

CSS Content | CSS-Tricks - 0 views

css-tricks.com/css-content

css content Property Tutorial web design

shared by Jochen Burkhard on 12 Jul 10 - Cached
  • Jochen Burkhard on 12 Jul 10
     
    CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it's called a pseudo element because it's not actually selecting anything that exists on the page but adding something new to the page.
Jochen Burkhard

10 CSS3 Properties you Need to be Familiar with | Nettuts+ - 0 views

net.tutsplus.com/...s-you-need-to-be-familiar-with

css3 properties Tutorial Important

shared by Jochen Burkhard on 02 Dec 10 - No Cached
  • Jochen Burkhard on 02 Dec 10
     
    "We've already covered the thirty CSS selectors that we should all memorize; but what about the new CSS3 properties? Though most of them still require a vendor-specific prefix, you can still use them in your projects today. In fact, it's encouraged! The key is to first determine whether or not you're okay with a slightly different presentation from browser to browser. Are you okay with, say, IE displaying 90 degree corners, rather than slick rounded ones? That's up to you to decide. However, always remember that websites needn't look identical in every browser. At the conclusion of this article, we'll work on a fun final project."
  • Jochen Burkhard on 02 Dec 10
     
    Very useful and fun to read.
Luciano Ferrer

Isotope - jquery magic layouts - responsive - 10 views

isotope.metafizzy.co

isotope jquery layout responsive

shared by Luciano Ferrer on 10 May 11 - No Cached
  • Luciano Ferrer on 23 Oct 11
     
    Isotope: An exquisite jQuery plugin for magical layouts Features Layout modes: Intelligent, dynamic layouts that can't be achieved with CSS alone. Filtering: Hide and reveal item elements easily with jQuery selectors. Sorting: Re-order item elements with sorting. Sorting data can be extracted from just about anything. Interoperability: features can be utilized together for a cohesive experience. Progressive enhancement: Isotope's animation engine takes advantage of the best browser features when available - CSS transitions and transforms, GPU acceleration - but will also fall back to JavaScript animation for lesser browsers.
Jochen Burkhard

Create modern Web sites using HTML5 and CSS3 - 1 views

www.ibm.com/...wa-html5

CSS3 HTML 5 modern sites web

shared by Jochen Burkhard on 05 Mar 10 - Cached
  • Jochen Burkhard on 05 Mar 10
     
    Summary:  Since the World Wide Web emerged in the early 1990s, HTML has evolved to become a relatively powerful markup language, which, when backed up by its close partners JavaScript and CSS, can be used to create visually stunning and interactive Web sites and applications. This tutorial serves as a hands-on introduction to HTML5 and CSS3. It provides information about the functionality and syntax for many of the new elements and APIs that HTML5 has to offer, as well as the new selectors, effects, and features that CSS3 brings to the table. Finally, it will show you how to develop a sample Web page that harnesses many of these new features. By the time you have finished this tutorial, you will be ready to build Web sites or applications of your own that are powered by HTML5 and CSS3.
Nicolas Casel

New features with CSS - 0 views

www.webdesignerdepot.com/...-can-get-excited-about-in-2015

css

shared by Nicolas Casel on 18 Jan 15 - No Cached
  • Nicolas Casel on 18 Jan 15
     
    selectors level 4 blend modes calc() function css variables css exclusions css shapes css grid layout
Laura Reed

CSS Stats - 0 views

cssstats.com

CSS optimization web design css tool

shared by Laura Reed on 23 Mar 15 - No Cached
Tonny Mathews liked it
  • Laura Reed on 23 Mar 15
     
    Get stats on your site's CSS. Learn how many colours you've used, or how many selectors you have.
  • anonymous on 26 Oct 18
Soul Book

The Incredible Em & Elastic Layouts with CSS - 0 views

jontangerine.com/...m-and-elastic-layouts-with-css

blog css tools webdesign typography design fonts text layout web framework layouts em elastic

shared by Soul Book on 01 Apr 10 - Cached
  • Elastic design uses em values for all elements. Ems are a relative size, written like this: 1em, 0.5em, 1.5em etc. Ems can be specified to three decimal places like so: 1.063em. “Relative” means: They are calculated based on the font size of the parent element. E.g. If a <div> has a computed font size of 16px then any element inside that layer —a child— inherits the same font size unless it is changed. If the child font size is changed to 0.75em then the computed size would be 0.75 × 16px = 12px. If the user increases (or decreases) text size in their browser, the whole interface stretches (or shrinks.)
  • All popular browsers have a default font size of 16px. Therefore, at the default browser setting, 1em = 16px.
  • The <body> inherits it unless styled otherwise using CSS. Therefore 1em = 16px, 0.5em = 8px, 10em = 160px and so on. We can now specify any element size we need to using ems!
  • ...9 more annotations...
  • However, (gasp) IE has a problem with ems. Resizing text from medium (default) to large in IE5/6 would lead to a huge increase in font size rather than the gradual one expected. So another selector is needed to get IE to behave: html{ font-size:100%; }
  • Let’s give our <body> some more style, and center everything in the viewport (this will be important later for our content wrapper.) Our initial CSS ends up like this: html{ font-size: 100%; } body{ font-size: 1em; font-family: georgia, serif; text-align: center; color: #444; background: #e6e6e6; padding: 0; margin: 0; }
  • 1 ÷ 16 × 740 = 46.25em (1 ÷ parent font-size × required pixel value = em value)
  • While we're here, we might as well add some typographic goodness by selecting a basic leading and adding some vertical rhythm, with everything expressed in ems.
  • Set a 12px font size with 18px line height and margin for paragraphs
  • Dividing the desired line height (18px) by the element font size (12px) gives us the em value for line height. In this example, the line height is 1 and a half times the font size: 1.5em. Add line height and margin properties to the CSS: p{ font-size: 0.750em; line-height: 1.5em; margin: 1.5em; } Now the browser will say to itself, “Oh, line height and margin is set to 1.5em, so that should be 1.5 times the font size. What’s the font size, again? 12px? OK, cool, make line height and margin 1.5 times that, so 18px.”
  • To retain our vertical rhythm we want to set an 18px line height and margin. Easy: If the font size is 18px then 18px in ems is 1em! Let’s add the properties to the CSS (and make the font weight light:) h1{ font-size: 1.125em; line-height: 1em; margin: 1em; font-weight: 300; }
  • Jon, good article and very useful chartm but your text sizing method has one major drawback. If elements with font-sizes set in em’s are nested, i.e with lists, these elements inherit the font size. Therefore each child element will be 0.75em (or 75%) of the previous one: See an example here. (Would have posted the code put it was coming out really ugly!) I would recommend against using that method and setting the global font size in the body tag i.e. 'font-size:75%' for 12px. Then only setting different font-sizes where necessary.
  • Thanks Will, interesting point, but that is solved with a simple font-size:1em on the first child. Retaining the default ensures that even images are sized correctly in ems. IE (surprise) will compute incorrectly against a parent length equivalent to 12px. My preference born out by some minor but painful computed size errors in complex layouts is not to adjust the body, and only set font size where necessary for specific elements.
  • Soul Book on 01 Apr 10
     
    A nice and simple explanation of using EMs to make elastic layouts
Soul Book

CSS techniques I use all the time - 0 views

www.christianmontoya.com/...-techniques-i-use-all-the-time

blog css tools webdesign typography design fonts text layout web layouts webdev reference code coding

shared by Soul Book on 01 Apr 10 - Cached
  • EM calculations Sizing text is always an important part of making a usable design. I start all my CSS files with the following rules: html { font-size:100.01%; } body { font-size:1em; } The explanation for this comes from "CSS: Getting Into Good Coding Habits:" This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current "best" suggestion is to use the 100.01% value for this property.
  • I used the following calculation: 14px/16px = .875, 18px/16px = 1.125. So my default text at 1 em would translate to 16px for most users, and my small text I sized at .875em which I can trust to result in 14px for most users, while my large text I sized at 1.125em which I can trust to result in 18px
  • Safe Fluid-width Columns I work with hybrid fluid layouts all the time, usually with max-width set at anywhere from 900 to 1000px. I usually have floated columns with percentage widths, and browsers will calculate these percentage widths to whole pixel values when rendering the columns.
  • ...3 more annotations...
  • A typical problem is the following: when a user has the viewport at a size that makes the outer container 999 pixels wide, if the first column is 60% and the second is 40%, IE 6 will always calculate the two columns as 600 and 400 pixels and as a result, the two will not fit (600+400 = 1 more than 999) and it will drop the second column. This is obviously not intended behavior, and in a world where we still have to use floats for columns (I can't wait for display:table support across all browsers), it's important to work around this problem. I used to give my last column 1 less percent (in this example, it would have 39% instead of 40%, but this would usually result in columns that don't quite fill up the container. Of late I have been giving the last column .4 less percent (in this example, 39.6%), which seems to work perfectly. Browsers will calculate this width and round up, but it will still fit even with an odd container width like 999px and I won't have to worry about dropped columns.
  • Filtering for Old Browsers To be honest, I barely support IE 6 nowadays. If there is something special about my layout that doesn't work in IE 6, I will simply filter it out of the CSS that IE 6 understands
  • Because old browsers like IE 6 don't support the "first child" selector (right caret >), I can do the following to make sure that IE 6 only gets the basic setting and all the new-fangled browsers get the right result: div#container { width:900px; } html>body div#container { width:auto; max-width:900px; } /* This overrides the previous declaration in new browsers only, IE 6 simply ignores it. */
  • Soul Book on 01 Apr 10
     
    Excellent simple collection of CSS tips that are easy to remember and implement. It's an old article, but i think everything is still relevant
1 - 20 of 33 Next ›
Showing 20▼ items per page