December 8, 2024

CSS

DSC_1106_3

CSS – Cascading Style Sheets: When I first heard this term, way back 10+ years ago, I wasn’t sure at all what it was, why the page they were on didn’t have a (.htm or .html) suffix and didn’t know there are actually three ways to use CSS. We just coded our HTML, copied and pasted many times over and over and over, in places not only on the page but other pages, hoping that it would all look the same. Today’s CSS is so much powerful than just simple formatting, sizing, color.. well you get the idea after a while.

I frequently use this page as a reference for my students in classes I teach, resource for me to have at hand and for the general populace. So it may look at tad unorganized as I will frequently just add to the bottom when I find something cool I don’t want to loose and think worthy of sharing. I will do my best to keep to the new 2017 formatting plan I came up with to make it easier to read the URL and identify sites you may already know and recognize not only by name but actual URL.

The current last update here was 1-10-2017…in progress.. also there is little hope of alphabetizing this list.. but will attempt to group in some fashion.

Buttons


CSS Buttons
(http://www.bypeople.com/css-button/)

How to Create CSS Ghost Buttons
(http://sixrevisions.com/css/ghost-buttons/)

—————-

Animation
10 Simple & Smart CSS Snippets
(http://www.hongkiat.com/blog/simple-css-snippets/)

15 Best CSS3 Loading Animation Tutorials
(http://designsparkle.com/css3-loading-animation/)

30 Free HTML5, CSS3, jQuery Upload File Form Script Designs
(http://www.instantshift.com/2015/10/27/free-html5-css3-jquery-upload-file-forms/)

8 Visually Awesome CSS Tutorials & Techniques
(http://www.smashingapps.com/2014/11/13/38-visually-awesome-css-tutorials-techniques.html)

http://sixrevisions.com/css/css-style-guides/

Boiler Plate
http://bjankord.github.io/Style-Guide-Boilerplate/

—————

https://github.com/styleguide/css

http://codeguide.co/#css

http://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/

—————–

RESPONSIVE v. ADAPTIVE WEB DESIGN
I presented these in one class. Its a quick teach on responsive v. adaptive. CSS is where it all happens.

Start here
https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/

next
http://bradfrost.github.io/this-is-responsive/

The Code (key is the ‘%’)
https://responsivedesign.is/guidelines/build-a-fluid-grid

https://responsivedesign.is/guidelines/flexible-images-and-media
https://responsivedesign.is/resources/images
https://responsivedesign.is/guidelines/flexible-images-and-media

http://www.slideshare.net/roodlicht/anyone-40173018?qid=bcf63c16-5511-49a2-be8d-10b1a212b742&v=&b=&from_search=11

Last update 11-24-16