Stream

Join this community to post or comment
 

CSS Shapes: Creating Hand Watch Shape in CSS

Learn How to create Hand Watch Shape Design with CSS by creating four rectangles and circle with Flexbox Layout and Key CSS properties like position absolute, z-index, transform rotate and transform-origin.

Code Editor in use: Atom.

#css3
1
1
Add a comment...

Chinmay Udand

Discussion  - 
 
Hi,

Please recommend good tutorial book or link for HTML, CSS, JavaScript, JQuery, XML for beginning .

Thanks in advance.
2
Total PC Recovery's profile photoSmokin Mesa's profile photo
3 comments
 
codeschool
CSS tricks
http://tympanus.net/codrops/
Add a comment...

Egržvýd Chálobodor

CSS Frameworks  - 
 
I ported Animate.css to SASS and Stylus (again).
But this time, it's done right.

https://github.com/mystrdat/the-real-animate.sass
https://github.com/mystrdat/the-real-animate.styl
2
Add a comment...

Grzegorz Mucha

Tips and Tricks  - 
 
Easy way to install google fonts on Win10
1
Add a comment...

A web developer
owner

Links and Resources  - 
 
Do you like Material Design? 82% of developers voted yes. What do you think? Write down your opinion here — https://goo.gl/531kbz

#CSS   #MaterialDesign   #Google  
32
10
 
CSS Shapes: Creating Diamond Shape in CSS

Learn How to create Diamond Shape Design with CSS by creating four triangles with Flex Layout and Key CSS properties like border and margins.

Code Editor in use: Atom.
2
1
Add a comment...

Matt Smith
moderator

CSS Demos  - 
 
Dancing Karateka

The 8-bit dancing karateka (remember that game, you 80s kids?) is an animated gif but the moving across the floor is done with a little CSS. Hammer time!

http://codepen.io/bingocaller/pen/xORbMQ
15
2
Joe Gaspar's profile photo
4 comments
 
Ok now I'm frustrated.

The game I remember had a best of 3 mechanism and it was 1 hit and you win the round; I think it used a rock paper scissors type thing. Closest looking game that I can find is "International Karate", but the version that looks similar to what I'm thinking of was for the C64, and I remember playing the game I'm thinking of on the NES.

It was just two fighters and a weird old referee guy in the background who raised his left or right arm to indicate the winner of the round.
Add a comment...

Matt Smith
moderator

CSS Demos  - 
 
Single Div Instagram Logo

📸

http://codepen.io/AllThingsSmitty/pen/pbNgXd
9
1
Matt Smith's profile photoJason Knight's profile photo
2 comments
 
The inner diameter of the "camera" not matching the radius of the outer one looks a bit wonky... would also be nice if it were all done in EM instead of pixels given that PX is a giant middle finger to usability -- would also make it easier to scale since if you did the font-size on the parent, you could adjust how big ALL of it is based on same...

I'd probably also try doing the background with layered inset box-shadows instead of linear-gradient, just as it's less code.

Just played with it for a bit, came up with this:
http://codepen.io/anon/pen/yJgpKa

Making the "camera" a rectangle instead of a square made the radius mismatch less annoying, it's in EM so it's easier to size up/down -- though the layered inset box-shadows will fall apart if you want it larger than 256x256 in most browsers.

Thankfully as a icon it's damned unlikely in real-world deployment you'd want it bigger than that.
Add a comment...

Стела Пламенова

Links and Resources  - 
 
Can you make a House Mouse in pure CSS? Challenge yourself!
https://cssquests.com/mouse-house/
Mouse in the House quest is now open for the bravest CSS lovers! You can submit an entry until 09 Jul 16.
1
Add a comment...

Matteo Marianecci

Questions and Answers  - 
 
Hi Guys! I need your help, I am creating an A4 sheet with css to be printed, the problem is that the layout is made columns, so I have to scroll the text between the columns dynamically, I tried it with cssregions.js but it does not work when used more different columns
1
Add a comment...

Created by

About this community

The Biggest CSS Group on Google+ Some important things before you star posting: 1. This is NOT a place to promote your website or related links. 2. Links posted without descriptions WILL BE DELETED. 3. Don't post non-related topics; these will be deleted and YOU WILL BE BANNED from this group. 4. Be respectful to community members; don't argue or use abuse language. YOU WILL BE BANNED from this group. 5. Be positive and contribute! Useful web development websites:

Steven Roberts

CSS Demos  - 
 
Checkout my new animated gradient SASS mixin on codepen!
5
Add a comment...

Bennet Kosse

CSS Demos  - 
A game for learning CSS flexbox
7
3
eva Fert's profile photoBennet Kosse's profile photo
2 comments
Add a comment...

Aaron Krauss

CSS Demos  - 
 
To take your mind off of the UK - you should check out my newest blog post. In it, I compare the two top CSS architectures - BEM and SMACSS - and talk about why I like to take attributes of both when I write my custom styles.
Code architecture is super important when you want to have clean, readable, and organized code. For small, personal projects, you might be able to get away with just a “hacker” mentality in the sense of just throwing some code together – but that will quickly break down to an unmaintainable state for larger projects. A lot...
1
Add a comment...

Deborah P

Links and Resources  - 
 
 
How do you find out which IT positions are commanding the greatest salaries, and what training you may need to be an expert in that field?
Take this 5 minute survey and tell Packt what tech you think has gained prominence in the last year, and which has faded from use.

As a bonus, when you complete the survey you will receive a discount code for 75% off any of eBooks, videos, or blended courses!
1
Add a comment...

Dennis Fischer (DarkWiiPlayer)

Questions and Answers  - 
 
Can someone tell me what is wrong with the following line of CSS code?
font-size: calc(((2vh * 1vh / 1vw) + (2vw * 1vw / 1vh)) / 2);
1
Dennis Fischer (DarkWiiPlayer)'s profile photoJason Knight's profile photo
4 comments
 
+Dennis Fischer That it's based on the browser or OS setting is in fact the ENTIRE reason the WCAG says to use EM for font sizes...

I'm particularly sensitive to it as I come to places that use px for font sizes or play goofy tricks, and I end up forced to either dive for the zoom or go find some other site that isn't telling me to piss off.

But to be fair, I've been using the 20px base size OS-wide since Windows 3.0 called it "8514" since it was meant to be usable on the IBM 8514 display with it's whopping 800x600 resolution being shown at the same size as a 640x480 VGA display. Back in the day before we had font smoothing, upping the resolution one notch higher than what was "normal" for that size display and then telling Windows to just up-scale everything was a cheap and easy way to improve legibility and decrease the jaggies.

... and the browsers USED to inherit it by default, though you can now manually set it in most browsers, or force it with plugins in others. (Naturally webkit/blink browsers give a flying purple fish about accessibility so you have to go to extensions for that now)

Which is why I laugh when Apple starts bragging about their display scaling -- hey look they've added the bleeding edge of 1990's Windows technology!!!

It's kind of sad that with Windows 10 they've pretty well shtupped a good deal of that functionality in favor of trying to actually anisotropic filter a zoomed in version of programs. It's ugly, it's less useful, and much like the rest of the OS it's a giant middle finger to users with accessibility needs. Much like how the interface changes are a giant middle finger to notebook and desktop users!

As with anything else, you could do far worse than to follow the WCAG's recommendations... and that means fonts whenever possible in EM's, and layouts whenever possible in EM's.

They say use EM, so use 'em!
Add a comment...

Rodney Vg

Links and Resources  - 
8
1
Federico Totti's profile photo
 
Thanks
Add a comment...

Nina Diana

Links and Resources  - 
 
CSS Tutorial for Beginners - 20 - CSS Box Model Part 4
1
Add a comment...

Dariya Lopukhina

CSS Articles / Guides  - 
 
CSS Bliss is a nice usable methodology of styles organization. It is quite similar to BEM but have some peculiarities which distinguish it among other methodologies.
CSS Bliss stands out among other style guides due to its usability and readability. Let's review the peculiarities of this methodology.
8
3
Jason Knight's profile photo
 
I always find these types of naming conventions agonizingly confusing as I can never keep track of "this many underscores" or "this many hyphens" meaning. It's so easy to get lost on and needlessly cryptic you're just BEGGING for it to screw up.

Much less, in most cases this methodology ends up encouraging people NOT to leverage their semantic tags or nesting orders, resulting in fat bloated code from people throwing endless pointless idiotic classes at EVERYTHING.

I don't know where this nonsensical gibberish paranoia about child selectors magically taking "extra render time" came from, but you can bet your sweet bippy that even if it were true, (which it isn't) the increase in size of the namespace mixed with the fatter markup more than easily negates it.

It's mouth-breathingly stuping mind-numbingly dumbass nonsense like this that explains why people waste three to six dozen k of HTML and a hundred k or more of CSS on doing less than a dozen k of HTML and two dozen K of CSS' job!

Sorry if that's a bit insulting, but I cannot fathom how any sane or competent developer could find any of this to improve "usability and readability"... quite the opposite in fact as it's one step removed from things like brain** or entries into the IOCCC.

But then, after some 38 years of programming I'm still a worshiper at the throne of all things Wirth, and still say that C is needlessly and pointlessly cryptic to the point I'd rather hand assemble 8k of Z80 machine language than deal with 100 lines of C code... so YMMV.

It's just... sometimes it feels like people are trying on purpose to make all this stuff harder for no good reason by making themselves write three to twelve times the code needed... as evidenced by most people's SCSS rubbish and OOCSS style nonsense being fat bloated train wrecks of ineptitude.
Add a comment...

Robin Bourdet

Tips and Tricks  - 
 
Nop, that's not a tennis match, that's a CSS loader made by us for our users, you can use it if you want :)

Sources are here : http://www.wifeo.com/code/14-full-css-ball-loader.html

(a little of fun in that bad world !)

Sorry about the bad quality of the GIF... I'm looking for a better software to create it...
6
Add a comment...

Matt Smith
moderator

CSS Demos  - 
 
CSS Filters Use Case: Re-Coloring Emoji

Very clever idea by Roman Komarov. 😎
6
Jason Knight's profile photo
 
Heh, that should be either turdpress or bootcrap's new logo.
Add a comment...