Runboard.com
You're welcome.
Runboard Extra! The Runboard Directory Runboard Knowledge Base

Ugly blue checkboxes in Chrome since the last update? checkbox

See how to fix it here!

Chat room Runboard Knowledge Base (wiki) Search Facebook Twitter





runboard.com       You are not logged in.

Page:  1  2  3  4  5  6  7 

 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator

Registered: 07-2005
Location: Texas
Posts: 10247
Karma: 272 (+331/-59)
Reply | Quote
Re: The "Spouzic-art" Revival (CSS only backgrounds)


Blue Table Cloth (inspired by a CSS pen by Mirandi)

CSS BACKGROUND CODE
body {
  height: 100%;
  background: repeating-linear-gradient(-45deg, transparent, transparent 1em, #7fd7f566 0, #7fd7f51a 2em, transparent 0, transparent 1em, #7fd7f54d 0, #7fd7f533 4em, transparent 0, transparent 1em, #c0ebfa99 0, #c0ebfa33 2em), repeating-linear-gradient(45deg, transparent, transparent 1em, #7fd7f566 0, #7fd7f51a 2em, transparent 0, transparent 1em, #7fd7f54d 0, #7fd7f533 4em, transparent 0, transparent 1em, #c0ebfa66 0, #c0ebfa1a 2em), #FFFFFF;
  background-blend-mode: multiply;
}


Image

---

Advertise Boards On TRDConceptsDE
4/29/2019, 6:52 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator

Registered: 07-2005
Location: Texas
Posts: 10247
Karma: 272 (+331/-59)
Reply | Quote
Re: The "Spouzic-art" Revival (CSS only backgrounds)


Stained Glass Motif

CSS BACKGROUND CODE
body {
  background: radial-gradient(2em, rgba(255, 255, 255, 0) 80%, #778691 80%, #7786ff 99%, rgba(255, 255, 255, 0)) 0 0, radial-gradient(4em, rgba(255, 255, 255, 0) 80%, #708691 80%, #708691 99%, rgba(255, 255, 255, 0)) 4em 4em, radial-gradient(4.75em, rgba(255, 255, 255, 0) 50%, #ffcfc4 50%, #17C2B3 75%, #11C2B3 99%, rgba(255, 255, 255, 0)) 4em 4em, radial-gradient(4.7em, rgba(255, 255, 255, 0) 50%, #0eC9B7 50%, #0eFC10 75%, #0eC0ff 99%, rgba(255, 255, 255, 0)) 0 0;
  background-size: 8em 8em;
  background-color: #ddcfdf;
}


Image

Remember, I test all of these CSS background creations on my Folder Mania testing message board.

---

Advertise Boards On TRDConceptsDE
4/30/2019, 1:39 am Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Joxcenia Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Runboard staff member

Registered: 11-2005
Location: Whoosher House
Posts: 3495
Karma: 56 (+57/-1)
Reply | Quote
Re: The "Spouzic-art" Revival (CSS only backgrounds)


They're beautiful.





---

Whoosh-ChelSierra-Muse-Twi-Saga
4/30/2019, 3:29 am Link to post Email Joxcenia   PM Joxcenia Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator

Registered: 07-2005
Location: Texas
Posts: 10247
Karma: 272 (+331/-59)
Reply | Quote
Re: The "Spouzic-art" Revival (CSS only backgrounds)


Blueberry Juice (this is the background I created for the Blueberry Fun Runboard skin)

/* CSS BACKGROUND */
body {
  background: #54F9F8;
  background: #092756;
  background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top, rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #6791d4 50%, #092756 100%);
  background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%, #6791d4 50%, #092756 100%);
  background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg, #670d10 0%, #6791d4 50%, #092756 100%);
  background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg, #670d10 0%, #6791d4 50%, #092756 100%);
  background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%, #6791d4 50%, #092756 100%);
}

Image

---

Advertise Boards On TRDConceptsDE
4/30/2019, 8:50 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator

Registered: 07-2005
Location: Texas
Posts: 10247
Karma: 272 (+331/-59)
Reply | Quote
Re: The "Spouzic-art" Revival (CSS only backgrounds)


Zucinni Bands is the background I created for the Green on Dark Runboard theme update. The name comes from the name of the blended colors used in the creation of the background.

/* CSS BACKGROUND */
body {
  background: linear-gradient(27deg, #042900 5px, transparent 5px) 0 5px, linear-gradient(207deg, #011f06 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #032300 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #022900 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #142513 10px, transparent 10px), linear-gradient(#032100 25%, #013503 25%, #032700 50%, transparent 50%, transparent 75%, #022b09 75%, #002b0e);
  background-color: #222222;
  background-size: 25px 12.5px;
}

Image

---

Advertise Boards On TRDConceptsDE
5/5/2019, 7:11 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator

Registered: 07-2005
Location: Texas
Posts: 10247
Karma: 272 (+331/-59)
Reply | Quote
Re: The "Spouzic-art" Revival (CSS only backgrounds)


Aum Jersey - The resulting image is with a white (#FFFFFF) body background, but you can change the shade of the picture by using different hex colors.

/* CSS BACKGROUND */
body {
    background: #FFFFFF;
    background-image: repeating-linear-gradient(144deg, #0019e6bf, #19b96ebf 1px, transparent 0, transparent 2px);
    background-size: 12px;
}

Image

Last edited by Pastor Rick, 5/28/2019, 12:19 am


---

Advertise Boards On TRDConceptsDE
5/15/2019, 7:30 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator

Registered: 07-2005
Location: Texas
Posts: 10247
Karma: 272 (+331/-59)
Reply | Quote
Re: The "Spouzic-art" Revival (CSS only backgrounds)


My CSS code for the Lozenge art-deco background looks like this (so far):

/* DECO LOZENGE BACKGROUND */

HTML {
  height: 100%;
}
BODY {
    background: linear-gradient(to right top, #f689 15%, #fff0 15%) 2em 4em, linear-gradient(to left top, #f68c 15%, #fff0 15%) 2em 4em, linear-gradient(to left bottom, #f689 15%, #fff0 15%) 2em 4em, linear-gradient(to right bottom, #f68c 15%, #fff0 15%) 2em 4em, linear-gradient(to right top, #77ddff80 15%, #fff0 15%) 0 0, linear-gradient(to left top, #7dfc 15%, #fff0 15%) 0 0, linear-gradient(to right bottom, #7dfc 15%, #fff0 15%) 0 0, linear-gradient(to left bottom, #77ddff80 15%, #fff0 15%) 0 0, linear-gradient(to right top, #be9c 25%, #fff0 25%) 0 0, linear-gradient(to left top, #bbee9980 25%, #fff0 25%) 0 0, linear-gradient(to right bottom, #bbee9980 25%, #fff0 25%) 0 0, linear-gradient(to left bottom, #be9c 25%, #fff0 25%) 0 0;
    background-size: 4em 8em;
    background-color: #33f;
    font: 1.5em/1 'Trebuchet MS', Verdana, sans-serif;
}


Image

Last edited by Pastor Rick, 5/28/2019, 5:50 am


---

Advertise Boards On TRDConceptsDE
5/27/2019, 6:17 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator

Registered: 07-2005
Location: Texas
Posts: 10247
Karma: 272 (+331/-59)
Reply | Quote
Re: The "Spouzic-art" Revival (CSS only backgrounds)


I started playing with the numbers and color-tints of the lozenge code, and the results are an overlapping lozenge and diamond (art-deco) design.

BODY {
    background: linear-gradient(to right top, #f689 15%, #fff0 15%) 2em 4em, linear-gradient(to left top, #f68c 15%, #fff0 15%) 2em 4em, linear-gradient(to left bottom, #f689 15%, #fff0 15%) 2em 4em, linear-gradient(to right bottom, #f68c 15%, #fff0 15%) 2em 4em, linear-gradient(to right top, #77ddff80 15%, #fff0 15%) 0 0, linear-gradient(to left top, #7dfc 15%, #8c202000 15%) 0 0, linear-gradient(to right bottom, #7dfc 15%, #fff0 15%) 0 0, linear-gradient(to left bottom, #77ddff80 15%, #fff0 15%) 0 0, linear-gradient(to right top, #be9c 25%, #fff0 25%) 0 0, linear-gradient(to left top, #bbee9980 25%, #fff0 25%) 0 0, linear-gradient(to right bottom, #bbee9980 25%, #fff0 25%) 0 0, linear-gradient(to left bottom, #be9c 25%, #fff0 25%) 0 0;
    background-size: 4em 4em;
    background-color: #3355aa;
    font: 1em/1 Verdana, sans-serif;
}


Image

---

Advertise Boards On TRDConceptsDE
5/28/2019, 10:38 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Joxcenia Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Runboard staff member

Registered: 11-2005
Location: Whoosher House
Posts: 3495
Karma: 56 (+57/-1)
Reply | Quote
Re: The "Spouzic-art" Revival (CSS only backgrounds)


They're all really cool.





---

Whoosh-ChelSierra-Muse-Twi-Saga
5/29/2019, 5:15 am Link to post Email Joxcenia   PM Joxcenia Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator

Registered: 07-2005
Location: Texas
Posts: 10247
Karma: 272 (+331/-59)
Reply | Quote
Re: The "Spouzic-art" Revival (CSS only backgrounds)


From Lesigner Girl comes this "Blacklight Bamboo" CSS background.

CSS Background

body {
  background-color: #000;
  background-image: linear-gradient(#00ff0012 1%, #0000 99%), linear-gradient( 90deg, #00ff0021 20%, #ff000021 40%, #00000021 80%, #00000021 100%), linear-gradient( 90deg, #64000033 30%, #ffffff30 80%, #64000033 100%), linear-gradient( #0000002b 2%, #ff00002e 12%, #ff00002e 30%, #00ff002e 65%, #0000002e 85%), linear-gradient( 45deg, #ffffff2b 5%, #0000001a 25%, #f003 30%, #f003 40%, #0003 60%, #0003 70%, #fff3 80%), linear-gradient( -45deg, #ffffff2b 2%, #0000001a 30%, #f003 45%, #f003 55%, #0003 65%, #0003 80%, #fff3 95%);
  background-size: 15px, 25px, 35px, 45px, 100px, 85px;
}

Image

---

Advertise Boards On TRDConceptsDE
6/6/2019, 1:10 am Link to post Email Pastor Rick   PM Pastor Rick Blog
 


Add a reply

Page:  1  2  3  4  5  6  7 



You are not logged in (login)