I've found a ton of useful free resources for beginners, dabblers and even pros, so I figured I'd compile them all here so that we can all benefit from them and help the template library grow!
UPDATE -
I've edited the basic CSS template so you can see which section you're altering.
Each section has a corresponding colour - ( though some are the same, this should make life much easier when coding. )
◆ ◆ ◆ THE CSS BIBLE ◆ ◆ ◆
the goods!
the goods!
|
CSS Generators CSS3 Maker CSS Cheat Sheet CSS KF Animator CSS Beautifier Codepen w3schools stackoverflow Clippy CSS Text Generator loading.io cssportal Iconfinder patternify awwwards behancedribbble animista Paletton |
◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ |
includes filters, transform tools and a library of CSS snippets. easy to use CSS generator for animation and transitions. super useful information. a keyframe animator generator. a tool that cleans up and formats css. really cool CSS resources submitted by moki! coding community + resource hub submitted by ohm! coding community + resource hub submitted by ohm! CSS shape generator Includes font style, size etc. creates custom loading icons and gives code! live demo, generators etc! icon resource. some are free some aren't! creates patterns inspiration CSS animations generator submitted by revolversnackalot! omg!! super cool colour mapper submitted by light!! |
◆ ◆◆ FREE HD STOCK IMAGES ◆ ◆ ◆
maybe it's maybelline...
maybe it's maybelline...
|
|
Pexels Stocksnap Gratisography Negative Space New Old Stock IM Free |
◆ ◆ ◆ ◆ ◆ ◆ |
Pomkeki's Freebies |
Cheat Sheet
HTML/CSS CHEAT SHEET wrote:
TO CENTER STUFF:
HTML:
<CENTER> </CENTER>
CSS:
TEXT-ALIGN: CENTER;
TO BOLD TEXT:
HTML:
<B> </B>
<STRONG> </STRONG>
CSS:
FONT-WEIGHT: BOLD;
(IF YOU'RE FONT COMES IN DIFFERENT WEIGHT YOU CAN USE THAT INSTEAD:
FONT-WEIGHT: 700;)
TO ITALIC TEXT:
HTML:
<I> </I>
CSS:
FONT-STYLE: ITALIC;
TO UNDERLINE TEXT:
HTML:
<U> </U>
CSS:
TEXT-DECORATION: UNDERLINE;
TO PUT A LINE THROUGH TEXT:
HTML:
<STRIKE> </STRIKE>
CSS:
TEXT-DECORATION: LINE-THROUGH;
SHOW FONT-SIZE AS BIGGER:
HTML:
<BIG> </BIG>
CSS:
FONT-SIZE: LARGER;
CHANGE FONT:
HTML:
<FONT COLOR="#FF0000"> </FONT>
<FONT FACE="ARIAL"> </FONT>
CSS:
FONT-FAMILY: ARIAL, HELVETICA, SANS-SERIF;
COLOR: #FF000;
HTML:
<CENTER> </CENTER>
CSS:
TEXT-ALIGN: CENTER;
TO BOLD TEXT:
HTML:
<B> </B>
<STRONG> </STRONG>
CSS:
FONT-WEIGHT: BOLD;
(IF YOU'RE FONT COMES IN DIFFERENT WEIGHT YOU CAN USE THAT INSTEAD:
FONT-WEIGHT: 700;)
TO ITALIC TEXT:
HTML:
<I> </I>
CSS:
FONT-STYLE: ITALIC;
TO UNDERLINE TEXT:
HTML:
<U> </U>
CSS:
TEXT-DECORATION: UNDERLINE;
TO PUT A LINE THROUGH TEXT:
HTML:
<STRIKE> </STRIKE>
CSS:
TEXT-DECORATION: LINE-THROUGH;
SHOW FONT-SIZE AS BIGGER:
HTML:
<BIG> </BIG>
CSS:
FONT-SIZE: LARGER;
CHANGE FONT:
HTML:
<FONT COLOR="#FF0000"> </FONT>
<FONT FACE="ARIAL"> </FONT>
CSS:
FONT-FAMILY: ARIAL, HELVETICA, SANS-SERIF;
COLOR: #FF000;
credit to: foxtribe, littlegrimoire from DA for post prettification ( pagedolls )
UPDATE -
I've edited the basic CSS template so you can see which section you're altering.
Each section has a corresponding colour - ( though some are the same, this should make life much easier when coding. )
Quote:
body {
background-color: red;
}
#toolbar {
background-color: pink;
}
#sitecontainer {
background-color: blue;
}
#headerholder {
background-color: red;
}
#charheader {
background-color: cyan;
}
.portraitcontainer {
background-color: grey;
}
#characterName {
background-color: black;
}
#playedBy {
background-color: yellow;
}
ul#pagetabs{
background-color: orange;
}
#rightheaderside {
background-color: green;
}
div#charcontent {
background-color: white;
}
li.widget {
background-color: green;
}
a {
color: yellow;
}
a:hover {
color: dark blue;
}
#footer {
background-color: pink;
}
background-color: red;
}
#toolbar {
background-color: pink;
}
#sitecontainer {
background-color: blue;
}
#headerholder {
background-color: red;
}
#charheader {
background-color: cyan;
}
.portraitcontainer {
background-color: grey;
}
#characterName {
background-color: black;
}
#playedBy {
background-color: yellow;
}
ul#pagetabs{
background-color: orange;
}
#rightheaderside {
background-color: green;
}
div#charcontent {
background-color: white;
}
li.widget {
background-color: green;
}
a {
color: yellow;
}
a:hover {
color: dark blue;
}
#footer {
background-color: pink;
}
http://codepen.io/
Loooooooots of really cool CSS resources on here - though some of them do involve JS or HTML so you just have to keep an eye out when browsing.
Loooooooots of really cool CSS resources on here - though some of them do involve JS or HTML so you just have to keep an eye out when browsing.
Moki wrote:
http://codepen.io/
Loooooooots of really cool CSS resources on here - though some of them do involve JS or HTML so you just have to keep an eye out when browsing.
Loooooooots of really cool CSS resources on here - though some of them do involve JS or HTML so you just have to keep an eye out when browsing.
Thank you Moki!!!!!
I added it to the list
If you find anymore let me know and I'll update
These are awesome, Fiebs! TYSM for sharing!
Stackoverflow and w3school are also good places if you hit a wall with coding.
Stackoverflow and w3school are also good places if you hit a wall with coding.
Ohm wrote:
These are awesome, Fiebs! TYSM for sharing!
Stackoverflow and w3school are also good places if you hit a wall with coding.
Stackoverflow and w3school are also good places if you hit a wall with coding.
Thank you friend!! I'm glad these are helpful!!
I've added your suggestions ty ever so much. ❤
Updated!!
Updated!
Hello.
I am new and would like to learn CSS so I can custimize my characters and the like. I have never used CSS before, though I am currently learning it. However, i find difficulty in applying it here. I looked at the 'page layout' that was available and
it looks like latin to me.
I know the very basics: How to change text color. Backgrounds. Just learned Internal, external and inline style sheet css. How to do image backgrounds.
I know I have a LOT to learn. My questions is...could someone with knowledge and patience with CSS walk me through it. I find the ability to bounce things off a living person while applying said knowledge helps me a lot more then merely reading it and trying to connect the dots. So to speak.
Thank You.
I am new and would like to learn CSS so I can custimize my characters and the like. I have never used CSS before, though I am currently learning it. However, i find difficulty in applying it here. I looked at the 'page layout' that was available and
it looks like latin to me.
I know the very basics: How to change text color. Backgrounds. Just learned Internal, external and inline style sheet css. How to do image backgrounds.
I know I have a LOT to learn. My questions is...could someone with knowledge and patience with CSS walk me through it. I find the ability to bounce things off a living person while applying said knowledge helps me a lot more then merely reading it and trying to connect the dots. So to speak.
Thank You.
Scantly_Pleasant wrote:
Hello.
I am new and would like to learn CSS so I can custimize my characters and the like. I have never used CSS before, though I am currently learning it. However, i find difficulty in applying it here. I looked at the 'page layout' that was available and
it looks like latin to me.
I know the very basics: How to change text color. Backgrounds. Just learned Internal, external and inline style sheet css. How to do image backgrounds.
I know I have a LOT to learn. My questions is...could someone with knowledge and patience with CSS walk me through it. I find the ability to bounce things off a living person while applying said knowledge helps me a lot more then merely reading it and trying to connect the dots. So to speak.
Thank You.
I am new and would like to learn CSS so I can custimize my characters and the like. I have never used CSS before, though I am currently learning it. However, i find difficulty in applying it here. I looked at the 'page layout' that was available and
it looks like latin to me.
I know the very basics: How to change text color. Backgrounds. Just learned Internal, external and inline style sheet css. How to do image backgrounds.
I know I have a LOT to learn. My questions is...could someone with knowledge and patience with CSS walk me through it. I find the ability to bounce things off a living person while applying said knowledge helps me a lot more then merely reading it and trying to connect the dots. So to speak.
Thank You.
I will be happy to help you as much as I can. Please feel free to PM me. ☺️
light wrote:
OMG I LOVE
Update!
You are on: Forums » Art & Creativity » The CSS Bible
Moderators: Mina, Keke, Cass, Claine, Sanne, Dragonfire, Ilmarinen, Darth_Angelus