arturo + css   386

Parallax scrolling with CSS variables | basicScroll
basicScroll allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want.
animation  css  javascript  parallax  scroll 
12 days ago by arturo
165 CSS Buttons
Collection of hand-picked free HTML and CSS buttons with little JavaScript: 3D, click, close, download, hover, like/favorite, play/pause, simple, social, share, star rating, submit and swipe buttons.
buttons  css  webdesign  ui 
16 days ago by arturo
Creative Button Styles
Modern and subtle styles & effects for buttons (hover and click)
buttons  design  css  ui 
16 days ago by arturo
Designing Websites for iPhone X | WebKit
Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing.
css  iphone  webdesign  webkit  iphonex 
18 days ago by arturo
Changing SVG path data with CSS |
Another great thing I learnt at CSS Day is that it’s possible to alter SVG path data – which is to be found in its d attribute – using CSS.
svg  animation  css 
20 days ago by arturo
Subtle Click Feedback Effects | Codrops
A set of subtle effects for click or touch interactions inspired by the visualization of screen taps in mobile app showcases. The effects are done with CSS animations mostly on pseudo-elements.
animation  css  inspiration  button 
23 days ago by arturo
Button Hover Examples From CodePen - Freebie Supply
Who doesn’t like buttons? A button means action. Clicking or tapping on one lets you do things. Buttons are an essential element of interaction design. That’s why they’re so important and that’s why it’s good to get them right.
button  buttons  css  design 
4 weeks ago by arturo
Pop Button Click Effect ~ CodeMyUI
Here is a button effect by Gowri Prasanth V M, when you click on the button it displays a pop like animation.
css  css3  button  animation 
4 weeks ago by arturo
Nintendo Store Loading Screen ~ CodeMyUI
This is a CSS only fullscreen loading animation designed by Steve Meredith, this loading effect can be seen in the Nintendo Store.
css  css3  loading  nintendo 
4 weeks ago by arturo
Inspiration for Text Styles and Hover Effects | Codrops
A couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG masking and Canvas.
css  css3  ui  ux  transitions 
4 weeks ago by arturo
Creative Link Effects
Subtle and modern effects for links or menu items
★★★★★  css  css3  transitions  animation  ui  ux 
4 weeks ago by arturo
Bulma: a modern CSS framework based on Flexbox
Bulma is a free and open source CSS framework based on Flexbox.
css  design  flexbox  framework  webdesign 
5 weeks ago by arturo
CSS Naming Conventions that Will Save You Hours of Debugging
CSS isn’t the prettiest ‘language,’ but it has successfully powered the styling of the web for over 20 years now. Not doing too badly, huh?
css  bem 
8 weeks ago by arturo
What is Tailwind? - Tailwind CSS
Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.
css  framework 
11 weeks ago by arturo
Font style matcher
If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you've chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths [1]. This tool helps you do exactly that.
css  fonts  tools  typography 
november 2017 by arturo
Free Learn Grid Layout video series
Learn by watching! In addition to all of the example code on this site, I’m creating a series of short video tutorials showing how Grid works and some of the key features.
css  grid  tutorial 
september 2017 by arturo
12 Small CSS Frameworks To Use In Your Web Designs
You probably don’t need most of the features that come with large UI frameworks such as Bootstrap, especially when you’re working on small, straightforward projects that you just want to get up and running as soon as possible. Fortunately, there are smaller, simpler CSS frameworks out there that you can use instead.
css  framework 
august 2017 by arturo
Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations.
css  animation  generator  css3 
august 2017 by arturo
Archetype, Digital Typography Design Tool by Our Own Thing, using Google web fonts
Archetype lets designers like you very quickly and easily create consistent typography styling and spacing live, in the browser. These styles are all underpinned by established typographic best practices meaning less guesswork and more harmonious designs.
css  design  fonts  tools  typography  sketch 
august 2017 by arturo
Guide to building layouts with CSS Grid
Ever since the design profession came to the web world — when websites went beyond linked text documents — layout creation has felt limited and cumbersome. Starting with (nested) HTML tables, many hacks have come and gone to deal with the layout problem.
css  grid  cssgrid  webdesign 
august 2017 by arturo
Here's a Super Quick Way to Try out CSS Grid | Jen Simmons
A lot of people are getting excited about CSS Grid, and want to learn it. A lot of people are also super busy. So let me teach you some very basic things about Grid, and get you started with a 5-minute taste.
css  grid  cssgrid  webdesign 
august 2017 by arturo
A Complete Guide to Grid | CSS-Tricks
CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that elements children (which become Grid Items).
cssgrid  css  design  grid  layout  webdesign 
august 2017 by arturo
Get Started with Grid Layout
There is quite a lot to the CSS Grid Specification, however you don’t have to learn the whole thing at once. I’ve gathered some of my resources here as a getting started guide. Start with the first few links, then check out the other sections based on the problems you need to solve.
cssgrid  css  grid  layout  reference  webdesign  tutorial 
august 2017 by arturo
The Top 9 Animation Libraries for UI Designers in 2017 — SitePoint
Frontend web design has been through a revolution in the last decade. In 2007, most of us were still designing static magazine layouts – in 2017 we’re building ‘digital machines’ with thousands of resizing, coordinated, moving parts.
animation  css  framework  javascript 
july 2017 by arturo
Freebie: Bootstrap DropDown Effects with Animate.css |
Here's the first in a long list of tutorials / code snippets to come here on, This one is aimed at spicing up your Bootstrap dropdowns with some cool effects from Animate.css.
bootstrap  css  animation  menubar  css3 
march 2017 by arturo
Text Input Effects | Set 1
Simple ideas for enhancing text input interactions
forms  ui  ux  webdesign  css  animation 
february 2017 by arturo
Just-add-water CSS animations
animation  css  css3  webdesign 
november 2016 by arturo
text-spinners – tawian
This project tries to mimic command line spinners like those from cli-spinners (where most of them are taken from) and bring them to the web. This is part of the tawian-frontend which is based on hack. Thanks to cli-spinners and hack!
animation  css  loading 
october 2016 by arturo
MJML - The Responsive Email Framework
The only framework that makes responsive-email easy
css  email  framework  responsive 
september 2016 by arturo
Creative Button Styles
Modern and subtle styles & effects for buttons (hover and click)
button  buttons  css  css3  design 
september 2016 by arturo
GreenSock | GSAP
The new standard for HTML5 animation
library  animation  html5  javascript  css 
june 2016 by arturo
Hover.css - A collection of CSS3 powered hover effects
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
animation  webdesign  github  css 
may 2016 by arturo
GitHub - straker/css-style-guide-audit: Audit the CSS on a page to see what elements are using styles from the style guide and which styles are overriding them
Audit the CSS on a page to see what elements are using styles from the style guide and which styles are overriding them.
webdesign  github  tools  css 
may 2016 by arturo
Ultimate CSS Gradient Generator -
A powerful Photoshop-like CSS gradient editor from ColorZilla.
css  css3  generator  gradient  tools 
april 2016 by arturo
Emmet LiveStyle — the first bi-directional real-time edit tool for CSS, LESS and SCSS
LiveStyle. The first bi-directional real-time edit tool for CSS, LESS and SCSS.
css  development  editor  sass  tools 
march 2016 by arturo
Soil | Roots
A WordPress plugin which contains a collection of modules to apply theme-agnostic front-end modifications.
css  javascript  performance  jquery  wordpress 
march 2016 by arturo
The picture element, srcset and sizes attributes, and associated features allow web developers to deliver an appropriate image to every user depending on a variety of conditions like screen size, viewport size, screen resolution, and more. Picturefill enables support for the picture element and associated features in browsers that do not yet support them, so you can start using them today!
css  design  html5  images  responsive 
december 2015 by arturo
Hover.css - A collection of CSS3 powered hover effects
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
animation  css  css3  effects 
december 2015 by arturo
Javascript library to create physics-based CSS animations
animation  javascript  css 
june 2015 by arturo
Sites for Browsing Type Pairings | CSS-Tricks
This week we'll do sites that are intended to help you choose fonts for your website by showcasing nice pairings (as not any two typefaces necessarily go together well).
css  design  fonts  inspiration  typography 
may 2015 by arturo
Touch, responsive, flickable gallery
css  gallery  javascript  jquery  responsive 
march 2015 by arturo
A Complete Guide to Flexbox | CSS-Tricks
The Flexbox Layout (Flexible Box) module (currently a W3C Candidate Recommendation) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").
css  css3  design  flexbox  layout 
december 2014 by arturo
How to Make Your Own Button UI Kit with Super-Clean Syntax - Tuts+ Web Design Tutorial
Every designer loves buttons. It’s a fact made known by the appreciation of projects such as Unicorn UI (which at the time of this writing only supports buttons and has almost 4,000 Stargazers on GitHub).
ui  buttons  css 
december 2014 by arturo
Chris Wright - Experiment: Flexbox Adventures
One of the Flexbox’s greatest strengths is its ability to calculate space, this is a huge gain when it comes to lists of items where space is an issue but we can’t determine how many items are going to exist.
programming  css  design  flexbox 
december 2014 by arturo
The tool to establish a typographic system
with modular scale and vertical rhythm.
css  grid  tools  typography  web 
december 2014 by arturo
View CSS Colours in Sublime Text with GutterColor | Wes Bos
At my jQueryTO talk I showed a new Sublime Text Package called GutterColor that allows you to view your CSS colours in your gutter.
sublime  colors  sublimetext  color  css 
december 2014 by arturo
A set of small, responsive CSS modules that you can use in every web project.
css  framework  layout  responsive  grid 
november 2014 by arturo
In a world of agile development and super-tablet-multi-magic-laptop-phones, the best layouts can’t be contained in a single framework or technique. CSS Libraries are a bloated mess of opinions about how to do your job. Why let the table-saw tell you where to put the kitchen?
compass  sass  framework  grid  css 
november 2014 by arturo
Z63 | Vertical align anything with just 3 lines of CSS | zerosixthree
With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY  vertically center whatever we want, even if we don’t know its height.
css3  html  css 
november 2014 by arturo
Reasons HTML and CSS might make you say what the fuck. A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas.
css  design  guide  html 
april 2014 by arturo
CSS Diner - Where we feast on CSS Selectors!
It's a little game to help you learn CSS selectors. Type in the correct selector to complete each level. Get help on the right.
css  games  tutorial 
march 2014 by arturo
SassMe | A Tool for Visualizing SASS Color Functions
Visualize SASS color functions in real-time without compiling.
color  colors  css  development  sass 
march 2014 by arturo
CSS Shake
Some CSS classes to move your DOM!
animation  css  design 
march 2014 by arturo
Just-add-water CSS animations
animation  css  css3  design 
february 2014 by arturo
Can I use... Support tables for HTML5, CSS3, etc
Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.
browser  css  css3  html5  reference 
february 2014 by arturo
Using Compass and Sass for CSS in your Next Project | Nettuts+
Sass could potentially be called CSS 2.0; it has some really nifty features that allow you to write your code in less time and with more flexibility. In today’s article, we will be working the basics!
compass  css  sass  framework 
june 2013 by arturo
❍ IcoMoon
Custom Built and Crisp Icon Fonts, Done Right
css  design  font  icon  icons 
june 2013 by arturo
Understand ‘+’, ‘>’ and ‘~’ symbols in CSS Selector | TechBrij
It explains How to use different signs (+,> and ~) in CSS selector and their differences.
webdesign  css  selectors 
february 2013 by arturo
Variable Grid System :: Generate CSS grid templates based on '960 Grid System'
The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.
css  webdesign  grid  fluid 
february 2013 by arturo
RGBa & HSLa CSS Generator for Internet Explorer | Journal | Kimili
If you’ve been keeping up with how recent browsers have been implementing parts of the CSS3 spec, you may already be using RGBa or HSLa to define semi-transparent background colors. You’d also know that this works in recent versions of Firefox and Safari, but not in any version of Internet Explorer.
ie  explorer  css3  webdesign  css  rgba  webdevelopment 
july 2012 by arturo
CSS3 Best Practices for designers | Webdesigner Depot
In this article, I’ll try to cover some of the important things to remember when dealing with these issues. Keep in mind that nothing here is set in stone but these should just be guidelines to help you write more effective, easier to maintain, and future-proof code.
css  css3  webdesign  webdev 
may 2012 by arturo
A List Apart: Articles: Dive into Responsive Prototyping with Foundation
Today, we’ll take a look at how you can dive into responsive design using Foundation, a light front-end framework that helps you rapidly build prototypes and production sites. If you’ve avoided responsive design because it seemed difficult, or the tools weren’t there, or you weren’t sure of the need...then this is the perfect time to get started.
responsive  prototyping  CSS  foundation 
april 2012 by arturo
Foundation: Rapid Prototyping and Building Framework from ZURB
An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.
css  framework  prototyping  sass  compass 
april 2012 by arturo
PrefixFree: Break Free From CSS Prefix Hell - Smashing Coding
This article is the first piece in our new series introducing new, useful and freely available tools and techniques presented and released by active members of the Web design community. Lea Verou is well-known for her experiments with CSS and JavaScript and in this post she presents her recent tool, prefixfree, which will hopefully help you break free from the CSS prefix hell.
webdesign  css  prefixes 
january 2012 by arturo
This is a little tool we created for our Analog holding page. It inserts a layout grid in web pages, allows you to hold it in place, and toggle between displaying it in the foreground or background.
webdesign  960  grid  css 
january 2012 by arturo
« earlier      
per page:    204080120160

bundles : webdev

related tags

@font-face  accessibility  admin  agency  ajax  animation  app  article  artículo  avatar  backend  background  baseline  bem  bestpractice  bestpractices  blog  blueprint  book  bootstrap  border-radius  boxmodel  browser  business  button  buttons  calculator  calendar  cheat.sheet  cheatsheet  clear  coda  code  coding  collection  color  colors  community  comparison  compass  compatibility  conditional  conditional.comment  conditional.comments  cool  corners  css  css-mutiple-backgrounds  css3  cssgrid  currículo  dashboard  date  design  development  devkit  editor  effects  em  email  español  espresso  examples  experiment  explorer  firebug  firefox  flexbox  flexible  float  floats  fluid  font  font.stacks  fonts  fontstack  footer  form  formatter  formatting  forms  foundation  framework  free  fun  gallery  games  generator  github  gradient  gratis  grid  gui  guide  hack  hacks  howto  htaccess  html  html5  icon  icons  ie  ie6  image  image.replacement  images  inline  inline-block  inspiration  interface  iphone  iphonex  ipod.touch  javascript  jquery  layout  less  library  lightbox  links  lists  loading  mac  media-queries  menu  menubar  menus  microformats  minid  minify  minimalism  mobile  modalbox  moo  mootools  multiple  mysql  navigation  newsletter  niceforms  nintendo  online  opensource  optimizer  orphan  osx  overflow  pagination  parallax  pdf  performance  photography  photoshop  php  plugin  plugins  png  portfolio  prefixes  preload  presentation  print  programming  prototype  prototyping  pseudo  query  rater  reference  resources  responsive  resume  rgba  rounded  ruby  safari  sass  schemes  script  scroll  selectors  shorthand  showcase  silverback  sketch  slideshow  slimbox  smashingmagazine  snippet  snippets  software  sprites  standards  star  sticky  stripes  style  sublime  sublimetext  svg  switcher  tables  tabs  template  templates  test  testing  textmate  tip  tips  tool  tools  tooltip  transformations  transitions  transparency  tutorial  tutorials  twitter  typography  ui  usability  ux  validation  web  webdesign  webdev  webdevelopment  webkit  widget  wordpress  xhtml  zencoding  ★★★★★  ★★★★✩ 

Copy this bookmark: