arturo + css   401

Flexbox Tutorial | HTML & CSS Is Hard
The “Flexible Box” or “Flexbox” layout mode offers an alternative to Floats for defining the overall appearance of a web page. Whereas floats only let us horizontally position our boxes, flexbox gives us complete control over the alignment, direction, order, and size of our boxes.
flexbox  css  webdesign 
may 2018 by arturo
Blueprint: Multi-Level Menu | Codrops
A simple multi-level menu with delayed item animations and an optional breadcrumb navigation and back button.
navigation  menu  css  css3 
may 2018 by arturo
Fixed Bottom Edge Mobile Menu Animation | Web Design Inspiration with Code Snippets
Here is a handy mobile optimised navigation menu that sites at the bottom of the screen, the hamburger menu is conveniently placed in the center so it’s easily accessible by both left and right-handed users. It was designed by Stas Melnikov.
webdesign  navigation  css  css3 
may 2018 by arturo
Responsive Iframes with One Great CSS Trick - Theodo
Nowadays, more and more people use their phones to navigate the web. It is therefore even more important now for websites to be responsive. Most websites use YouTube videos, Google maps or other external website elements embedded in them. These functions are most commonly incorporated in a web page using the html iframe element and is one of the trickiest thing to make responsive.
css  css3  responsive  youtube 
may 2018 by arturo
144-responsive-grid by CSuttie · Pull Request #155 · milligram/milligram
Adds _ResponsiveGrid.sass loaded after _Grid.sass extending the class.
.row is extended with .row.row-responsive to generate flex-wrap: wrap;
css  grid  css3  flexbox  milligram 
may 2018 by arturo
Understanding the Scope in CSS Variables - Part 2 - Webkul Blog
In Part 1, We have started with a Quick Start Guide which explains – What CSS Variables are and Why we should care about them. We are now going to look into another important asset that you should really care about while using CSS Variables and it is Scope.
css  webdesign  variables 
may 2018 by arturo
Getting Started with CSS Variables - Part 1 - Webkul Blog
CSS Variables which are also called CSS Custom Properties are getting quite popular these days, due to their high-end capabilities and reactive nature. After reading this piece of writing, you will be able to understand how they can be used in real-world code scenarios.
css  variables  webdesign 
may 2018 by arturo
Dealing with long words in CSS | justmarkup
The web consists of content, content consists of words and words can be long, very long. Everyone involved with the web will sooner or later have to deal with long words.
css  layout  typography 
april 2018 by arturo
Collection of CSS snippets | justmarkup
Some time ago I asked on twitter about the favorite CSS snippets people use regularly. A lot of people replied with great snippets. So, without further ado, here are the most mentioned ones.
css  css3 
april 2018 by arturo
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 
march 2018 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 
march 2018 by arturo
Creative Button Styles
Modern and subtle styles & effects for buttons (hover and click)
buttons  design  css  ui 
march 2018 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 
february 2018 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 
february 2018 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 
february 2018 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 
february 2018 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 
february 2018 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 
february 2018 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 
february 2018 by arturo
Creative Link Effects
Subtle and modern effects for links or menu items
★★★★★  css  css3  transitions  animation  ui  ux 
february 2018 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 
february 2018 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 
january 2018 by arturo
What is Tailwind? - Tailwind CSS
Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.
css  framework 
december 2017 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
« 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  CriticalPath  css  css-mutiple-backgrounds  css3  cssgrid  currículo  dashboard  date  design  development  devkit  duotone  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  milligram  minid  minify  minimalism  mobile  modalbox  moo  mootools  multiple  mysql  navigation  newsletter  niceforms  nintendo  online  opensource  optimization  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  variables  web  webdesign  webdev  webdevelopment  webkit  widget  wordpress  xhtml  youtube  zencoding  ★★★★★  ★★★★✩ 

Copy this bookmark: