sunpig + css   431

Introduction · Intro to CSS 3D transforms › Docs
Even with these difficulties mounted up, trying out 3D transforms today is the right move. The CSS 3D transforms module was developed by the same team at Apple who produced the CSS 2D transforms and animation. Both specifications have since been adopted by Mozilla and Opera. Transforming three-dimensionally now will guarantee you’ll be ahead of the game when the other browsers catch up.
daviddesandso  css  3d  tutorial  webdev  frontend  browser  transform  perspective 
yesterday by sunpig
SASS vs. LESS | CSS-Tricks
"Which CSS preprocessor language should I choose?" is a hot topic lately. I've been asked in person several times and an online debate has been popping up every few days it seems. It's nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let's do this thing.
chriscoyier  sass  css  less  include  module  variable  webdev  frontent 
16 days ago by sunpig
Stubbornella » Blog Archive » Cross-Browser Debugging CSS
CSS has an underlying design and when you work with it, with the natural flow of how CSS is meant to be used, you will find you have a lot less bugs.
stubbornella  nicolesullivan  css  oocss  bug  browser  safari  firefox  chrome  ie  hack  position  block  context  zoom  haslayout  workaround  debug 
4 weeks ago by sunpig
CSS3 Structural Pseudo-class Expressions Explained | Impressive Webs
The keywords and the integer are pretty straightforward. A value of “even” or “odd” selects the even or odd elements, respectively, and an integer selects the nth of the targeted element. In other words, “li:nth-child(4)” means the “4th” list item will be selected.

The expressions, on the other hand, are a little more complicated, but not too bad once you mess around with them a little.
css  css3  presudoclass  expression  selector  odd  even  linear  webdev  frontend 
5 weeks ago by sunpig
Responsive viewport units - destroy/dstorey
Introducing vh, vw, and vmin

The vh unit stands for viewport height, vw for Volkswagen viewport width, and vmin represents whichever of vh or vw is the shortest length.
css  viewport  unit  responsive  height  width  proportion  grid  design  webdev  frontend 
6 weeks ago by sunpig
Stubbornella » Blog Archive » Scope donuts
The interesting thing about UI components (different than ads or widgets) is that they can sometimes contain other unrelated components. You can have a tabset that contains headings, paragraphs, media blocks, or even (holy ugly!) another tabset. Ideally, you would scope the CSS of the tabset to the tabs only, so it can’t bleed outward and change styles on the rest of the page, but you also want to prevent the styles from bleeding inward to content components. So we need a way of saying, not only where scope starts, but where it ends. Thus, the scope donut. The styles affect the donut shape, but not the other components which can be found in the donut hole.
css  nicolesullivan  scope  donut  hole  body  limit  html  webdev  frontend  future 
7 weeks ago by sunpig
Media Query & Asset Downloading Results | TimKadlec.com
If you’re going to hide a content image, you’re not going to be able to do it by setting display:none. I recommend using a Javascript or server-side based approach instead.

If you want to hide a background image, your best bet is to hide the parent element. If you can’t do that, then use a cascade override (like test five above) and set the background-image to none when you want it hidden.

For swapping background images, define them both inside of media queries.
timkadlec  mediaquery  screen  image  responsive  css  html  frontend  optimization 
7 weeks ago by sunpig
» The EMs have it: Proportional Media Queries FTW! Cloud Four Blog
RT @lyzadanger: Oops. I just blogged on @cloudfour again, this time about em-based media queries:
lyzagardner  mobile  em  media  query  mediaquery  responsive  width  layout  zoom  css  design  frontend  webdev  cloudfour 
9 weeks ago by sunpig
Measuring and sizing UIs, 2011-style — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts
For years we used pixels to lay out web pages. Then, not so long ago, we were dabbling with ems to make our pages elastic. Now, in 2011, most of us are adopting a responsive approach and using fluid grids and percentages.

These methods seem to have all happened sequentially, with us each time dropping the last. I’ve decided, though, that the best builds use aspects of all previous methods; fixed, elastic and fluid.
harryroberts  css  font  size  style  border  layout  line-height  rem  em  pixel  percentage  design  grid  visual  measure 
9 weeks ago by sunpig
envision - demos
Envision.js is a library for creating fast, dynamic and interactive HTML5 visualizations.
js  javascript  graph  chart  canvas  html  css  visualization  data  library  design  web  webdev  frontend 
9 weeks ago by sunpig
What is BEM?
Heard about the BEM methodology the other day; looks really interesting.
css  frontend  oocss  coding  design  development  patterns  bem  block  element  modifier  yandex  naming  object  standard  from twitter
11 weeks ago by sunpig
About HTML semantics and front-end architecture – Nicolas Gallagher
When you choose to author HTML and CSS in a way that seeks to reduce the amount of time you spend writing and editing CSS, it involves accepting that you must instead spend more time changing HTML classes on elements if you want to change their styles. This turns out to be fairly practical, both for front-end and back-end developers – anyone can rearrange pre-built “lego blocks”; it turns out that none can perform CSS-alchemy.
html  css  js  javascript  stack  webdev  frontend  semantics  oocss  architecture  structure  module  reuse  necolas  nicolasgallagher  from twitter
11 weeks ago by sunpig
LukeW | Multi-Device Layout Patterns
Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we're not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable multi-device layouts.
lukew  responsive  adaptive  layout  linear  column  navigation  design  css  mediaquery  pattern  from twitter
11 weeks ago by sunpig
Greenbelt Festival - Where arts, faith and justice collide
Lovely responsive design & implementation: designed & built by @rachelandrew, @drewm, @ratiotype
responsive  web  design  rwd  frontend  fluid  adaptive  art  culture  music  css  html 
11 weeks ago by sunpig
Scope CSS classes with prefixes · Deep Thoughts by Mark Otto
When building a CSS design system like Bootstrap, it’s important to keep things simple, durable, and flexible. This is no easy task, especially on larger teams and projects where the number of components can become quite high. To help improve this situation in a CSS design system, you might consider using prefixed classes instead of chained classes.
css  webdev  webdesign  markotto  twitter  bootstrap  class  naming  smacss  modular  frontend 
february 2012 by sunpig
RESS, Server-Side Feature-Detection and the Evolution of Responsive Web Design – Mobile in Higher Ed
RT @dmolsen: RESS, Server-Side Feature-Detection and the Evolution of Responsive Web Design
ress  responsive  server  css  adaptive  yiibu  design  webdev  frontend  mobile  wpo 
february 2012 by sunpig
The bigger the box, the more you can do...
Should you use padding or margin to create space between boxes?
padding  margin  spacing  box  css  context  html  frontend  browser  webdev  thierrykoblentz 
february 2012 by sunpig
the Performance Golden Rule | High Performance Web Sites
Steve Souders (@souders) revisits the web Performance Golden Rule: (TL,DR: FRONTEND)
souders  performance  wpo  optimization  frontend  dev  js  javascript  css  image  speed 
february 2012 by sunpig
Redefined | Trent Walton
RT : "The largest and most exciting part of the design process now happens in the browser" great read by ...
trentwalton  responsive  adaptive  design  pixel  proportion  layout  mediaquery  webdev  html  css  from twitter
february 2012 by sunpig
« earlier      

related tags

#css  #trickery  3d  16px  37signals  456bereast  @font-face  @media  a11y  aarongustafson  abbr  absolute  abstraction  accelerate  accessibility  accordeon  active  adactio  adaptive  adaptivepath  address  adjust  admin  advanced  advice  after  ajax  ajaxian  ala  alanpearce  alexrussell  alias  alistapart  all  alpha  alt  ampersand  analysis  anatomy  android  andybudd  andyclarke  andyhume  angle  animate  animation  annadebenham  antialias  apache  api  app  appcache  appcelerator  apple  application  applicationcache  aqua  architecture  argument  aria  art  article  asp  aspect  aspnet  aspnetresources  assets  at-at  atat  audience  audio  automatic  average  awesome  awesomepersand  back  background  bandwidth  bar  base64  baseline  bbc  beer  before  behaviour  bem  ben  bertbos  best  bestpractice  bin  bing  bird  bleed  block  blur  boag  bobbyvandersluis  body  bodyguard  boilerplate  bokeh  bold  book  bookmarklet  bootstrap  border  bottom  box  box-shadow  box-sizing  boxmodel  breakpoint  brew  brianfling  bringhurst  brothercake  browser  browserdetection  browsers  bryanrieger  bug  bugs  bulletproof  bundle  business  button  buttons  cache  caching  calhenderson  cameronmoll  camp  can  canvas  capabilities  capability  cascade  cell  center  centre  chant  character  chart  cheatsheet  check  checkbox  child  chriscoyier  chriseppstein  chrisheilmann  chrismills  chrome  clagnut  class  classnames  clean  clear  clearfix  clearleft  click  client  clip  cloudfour  code  codeplex  codereview  coding  coke  collaboration  colophon  color  colour  column  columns  combinator  comp  comparison  compass  compatibility  competence  complete  complexspiral  compress  compression  condition  confusion  consditional  container  content  contenteditable  context  contrast  convention  conversion  convert  cool  copyright  corner  corners  counter  create  creator  crop  crossdomain  crunch  csrf  css  css3  csscience  csstricks  csszengarden  cube  cufon  cufón  culture  curl  cursor  custom  cute  dancedarholm  daneden  data  datauri  daveshea  davidcalhoun  daviddesandso  dda  deanedwards  debug  deck  decss3  default  delay  demo  density  dependency  derekpowazek  descendant  design  desing  desktop  detect  detection  detector  dev  developer  development  device  device-width  deviceatlas  devicewith  diagnose  diagonal  dialog  dialogue  diediedie  differene  different  digitalweb  dimension  direction  displacement  display  distribution  div  dns  document  dom  donut  dougbowman  download  dpi  drag  drop  dropdown  dry  dynamic  easing  ebook  edit  editor  eement  effect  elastic  element  elements  ellipsis  em  email  embed  embedded  ems  encapsulation  encode  ender  engine  enhacement  enhance  enhancejs  enhancement  epub  equal  ericmeyer  ethanmarcotte  even  event  example  execcommand  execure  execute  expand  experiment  experimental  expression  expressions  ext  extend  extension  face  facebook  fade  fahrner  failure  fallacy  fallthrough  farukates  faux  feature  field  fields  figure  filament  file  filemane  files  filter  filters  fingerprinting  firebug  firefox  fireworks  fish  fishbird  fittest  fix  fixed  flag  flash  flat  flexbox  flexible  flexiblebox  flickr  fling  float  fluid  focus  font  font-face  font-weight  fonts  fontspring  footer  forabeautifulweb  form  format  formatting  formfactor  forms  fout  fragment  framework  free  freeze  french  front  front-end  fronteers  frontend  frontent  full  fullscreen  fun  function  functionality  funny  future  game  garrettdimon  gaussian  gecko  gedit  geek  geeknotes  generate  generated  gesture  getcomputedstyle  getelementsbyclassname  gilde  github  glyph  gmail  google  graceful  gradient  graph  graphics  green  grid  group  guide  guidelines  guild  gzip  hack  hacks  hakonlie  hakonwiumlie  haml  handheld  handler  handlheld  hardware  harryroberts  haslayout  hbox  hcalendar  hci  head  header  heading  height  help  hide  hierarchy  high  highlight  hint  hints  hole  hollybergevin  homescreen  house  hover  howto  href  htaccess  htc  html  html5  html5doctor  http  ia  icon  icons  id  identifier  ie  ie6  ie7  ie8  ie9  image  image-set  imagequality  images  img  imge  implementation  implicity  import  important  inactive  inayailideleon  inception  include  indent  info  information  ingochao  inherit  inline  inline-block  input  insight  inspiration  inspriration  interaction  interactiondesign  interface  internetexplorer  internetexplorere  invert  ios  ipad  iphone  iphone4  isolation  iteration  ja  jackslocum  jakearchibald  jamesedwards  jamespearce  jaredsmith  javascript  jeffcroft  jeffveen  jeremykeith  jessejamesgarrett  joeclark  johnallsop  johngallant  jonathansnook  jonathanstark  jqm  jquery  js  jsbin  jslint  jsmin  kangax  kentbrewster  kevinhale  keyframe  keynote  kurafire  labjs  landmark  language  last-child  layer  layour  layout  leading  leak  left  legibility  leopard  less  lettering  lh  libraries  library  libs  lightbox  limit  line  line-height  linear  lines  link  links  liquid  list  live  load  loaded  loader  localstorage  logic  logos  lookup  love  ltr  lukew  lyzagardner  mac  magazine  mail  maintainability  maintainable  malarkey  manifesto  margin  markboulton  marketing  markotto  markup  markwubben  mask  mathias  mathiasbynens  matrix  matthewlevine  max-width  mean  measure  media  mediablock  mediaqueries  mediaquery  medium  mega  memory  merge  meta  methodology  mezzoblue  mhtml  microformats  microsoft  mikedavidson  milannegovan  milli  min-width  minify  mobile  mobilefirst  mobilesafari  mobileweb  mode  model  modifier  modular  module  mod_gzip  mod_rewrite  momentum  monster  movabletype  movie  mozilla  mri  ms  mt  multicolumn  multiple  music  names  naming  narrow  nataliedowne  native  navigation  neat  necolas  needabutton  negation  negativemargin  nest  netflix  nettuts  newsletter  nicholasgallagher  nicholaszakas  nicolasgallagher  nicolesullivan  nifty  nike  ninja  nl  no-js  none  nope  normalize  noscript  notes  nth-child  numbers  object  object-fit  objectoriented  odd  offline  offscreen  offset  oldskool  onload  oocss  opacity  open  opera  optimization  optimize  order  oreilly  orientation  osx  outlook  overflow  overlay  override  overview  package  padding  page  pages  pageweight  pagination  pamelafox  paragraph  parallax  parent  parse  partial  particletree  paste  patrickhaney  pattern  patterns  paulannett  paulboag  paulirish  paulrouget  pda  pdf  percentage  performance  perspective  peterpaulkoch  phone  photography  photoshop  php  pie  pixel  placeholder  planning  playground  playout  pleasure  plugin  png  polaroid  polyfill  polygon  popularity  popup  porterglendinning  position  positioning  positioniseverything  powerpoint  ppk  practice  pragmatic  prefetch  prefix  preload  prepare  preparser  preprocessor  presentation  presudoclass  preview  prince  print  printing  prism  privacy  problem  problems  process  production  professionalism  profile  prognostication  programming  progressive  progressiveenhancement  project  properties  property  proportion  proposal  protection  prototype  prototyping  pseudo  pseudo-element  pseudoclass  pseudoelement  pseudorandom  publishing  puzzle  px  query  quirksmode  race  radial  radius  rails  random  range  ransform  rant  raphael  raster  ratio  read  readability  rearrange  recommendation  record  redundancy  reference  regular  rel  relative  rem  remove  remysharp  render  rendering  repeat  repeating  replace  replacement  reset  resize  resolution  resource  resources  responsive  ress  retina  reusability  reusable  reuse  reverse  rgba  richardrutter  rinkmark  robot  rogerjohansson  role  roll  romancortes  rotate  round  rounded  roundedcorners  rounding  row  rtl  ruby  rule  rules  run  russweakley  rwd  ryanlazuka  safari  sandbox  sass  saveas  sb  scalability  scalable  scale  scaling  schill  scope  scoped  scottschiller  scratch  screen  screenreader  screenreaders  script  scripting  scroll  scrollimation  scss  search  security  securty  select  selected  selection  selector  selectors  semantic  semantics  semanticweb  sencha  separation  server  setup  shading  shadow  shauninman  shim  shinkansen  show  SI  sibling  side  sifr  silverback  simple  simplebits  simplicity  simulate  site  sitepoint  sixpart  size  skeleton  skip  skiplinks  skype  slant  slide  slides  slideshare  slideshow  slidingdoors  slope  smacss  small  smallbatch  smallscreen  smashingmagazine  smooth  sniff  snook  snookca  socialnetwork  software  souders  space  spacing  span  specificity  speech  speed  spof  spread  sprite  spriteme  sprites  sql  sqlinjection  ssl  stack  standard  standardization  standards  starhack  starwars  state  statistics  stephanierieger  stephenhay  stevesouders  sticky  stoyanstefanov  strategy  stres  structure  stuartlangridge  stubbornella  stuffandnonsense  stupidwebtricks  style  stylecouncil  styleguide  styles  stylesguide  stylesheet  stylesheets  styling  stylus  submit  suite  summary  support  survey  svg  swallow  swfir  swiffer  swipe  switch  sxsw  syntax  tab  table  table-layout  tables  tablet  tabs  tag  tantek  tap  target  teamsnap  technics  technology  template  templaye  test  testing  text  text-align  textarea  texteditor  theme  thierrykoblentz  thijsreigersberg  tidy  timelapse  timing  timkadlec  tinysrc  tip  tips  titanium  toggle  tool  toolkit  tools  touch  touchend  touchmove  touchstart  toy  transform  transition  translate  transparency  transparent  trends  trentwalton  trick  trickery  tricks  truetype  try  tufte  turntable  tutorial  tutorials  tweak  twitter  type  typeface  typekit  typepad  typgraphy  typography  ui  unicode  unicode-range  unit  unknown  unobtrusive  unstoppablerobotninja  upload  url  usability  userexperience  users  ux  validation  value  variable  variables  vaue  vbox  veerle  vendor  vertical  vertical-align  vestor  video  view  viewport  viget  visibility  visible  vision  visited  visual  visualization  visualizer  vitamin  vladimirvukicevic  w3c  wai  walker  walls  war  was  wasp  web  webaim  webapp  webapplicationstack  webdesign  webdesignshock  webdev  webdevcorners  webdings  webdirections  webfont  webkit  webserver  webstandards  webtech  westciv  wg  wide  widget  width  wilsonminer  window  windows  wireframe  wireshark  workaround  wpo  wpochat  wrapper  wurfl  xbrowser  xhtml  xml  xmlhttprequest  xpath  xray  xss  yahoo  yaml  yandex  yatil  yep  yepnote  yiibu  yui  yui-ext  yui3  z-indez  zachleat  zeldman  zen  zencoding  zero  zindex  zip  zoemickleygillenwater  zomigi  zoom 

Copy this bookmark:



description:


tags: