Page: 1 2 3 ... 5 6 7
Pastor Rick
Moderator
Registered: 07-2005
Location: Texas
Posts: 10246
Karma: 272 (+331/-59)
|
|
Reply | Quote
|
|
The "Spouzic-art" Revival (CSS only backgrounds)
Using the Spouzic-art theme, I added this CSS to my test board. Despite the appearance, zero graphic images are in use. You do not need a 3rd party image host to use the background (or header treatments).
/* CSS Background */
body {background-color: #3399cc;
background-image: linear-gradient(rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 15px, 25px, 35px, 45px;}
/* CSS background for the top headers */
.forum_list_header_newtext_td, .forum_list_header_forum_td, .forum_list_header_topics_td, .forum_list_header_posts_td, .forum_list_header_lastpost_td, .topic_list_header_modbox_td, .topic_list_header_newtext_td, .topic_list_header_posticon_td, .topic_list_header_topic_td, .topic_list_header_startedby_td, .topic_list_header_replies_td, .topic_list_header_views_td, .topic_list_header_lastpost_td {background: #A7B5C2;
background-image: linear-gradient(to top, #A7B5C2 0%, #3399cc 100%);
padding-top: 0;
padding-bottom: 0;}
/* CSS background reversed for the board stats table */
.forumlistboardstatsheader {background-image: linear-gradient(to bottom, #A7B5C2 0%, #3399cc 100%);}
I have named this pattern "Southern Plaid."
You can open the image in this post to see a full sized picture of the test board. Now for my question. Would you like to see more CSS backgrounds here?
Last edited by Pastor Rick, 1/6/2019, 2:17 pm
|
|
1/17/2018, 6:10 pm
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|
Joxcenia
Global Administrator
Runboard staff member
Registered: 11-2005
Location: Whoosher House
Posts: 3452
Karma: 56 (+57/-1)
|
|
Reply | Quote
|
|
Re: The "Spouzic-art" Revival
Very nice. I'm betting this will go over big. Especially after the PB fiasco.
|
|
1/18/2018, 1:09 am
|
Link to post
Email Joxcenia
PM Joxcenia
Blog
|
Pastor Rick
Moderator
Registered: 07-2005
Location: Texas
Posts: 10246
Karma: 272 (+331/-59)
|
|
Reply | Quote
|
|
Re: The "Spouzic-art" Revival
The trick is how to display the patterns. Currently, I am still clueless about what the best method is to do this, and I have created a second one.
-------
/* CSS Background */
body {background: #B3E1FF; /* fallback color */
background:
linear-gradient(60deg, transparent 75%, transparent 75%, rgba(255,255,255,.7) 75%) 0 0,
linear-gradient(245deg, transparent 75%, rgba(25,250,245,.6) 45%) 0 0,
linear-gradient(60deg, transparent 75%, rgba(255,255,255,.7) 75%) 7px -15px,
linear-gradient(245deg, transparent 75%, rgba(25,255,245,.8) 45%) 7px -13px,
#3399ff; /* sets the primary color for the pattern */
background-size: 4px 40px}
-------
What do I call this pattern?
|
|
1/18/2018, 2:29 am
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|
Lesigner Girl
Global Administrator
Head of Runboard staff
Registered: 11-2005
Posts: 25472
Karma: 426 (+479/-53)
|
|
Reply | Quote
|
|
Re: The "Spouzic-art" Revival
Great job getting that to look like plaid! It looks really nice. 
That 2nd one is pretty cool, too, although text might be a little hard to read on it with so much contrasting color. As for a name, the dark parts made me think of sound waves.
|
|
1/18/2018, 5:56 am
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Lesigner Girl
Global Administrator
Head of Runboard staff
Registered: 11-2005
Posts: 25472
Karma: 426 (+479/-53)
|
|
Reply | Quote
|
|
Re: The "Spouzic-art" Revival
quote:
Joxcenia wrote:
Very nice. I'm betting this will go over big. Especially after the PB fiasco.
Absolutely. Maybe we should also tell people how they can compress an image with tinypng, then turn it into a dataurl. I wouldn't recommend it for images with large file sizes, but it can be good for smaller images.
|
|
1/18/2018, 6:26 am
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Pastor Rick
Moderator
Registered: 07-2005
Location: Texas
Posts: 10246
Karma: 272 (+331/-59)
|
|
Reply | Quote
|
|
Re: The "Spouzic-art" Revival
quote:
Lesigner Girl wrote:
Maybe we should also tell people how they can compress an image with tinypng, then turn it into a dataurl. I wouldn't recommend it for images with large file sizes, but it can be good for smaller images.
That's what I did with the second pattern! I notice that if the dataurl is too large it isn't worth the effort but for something smaller than 50k it works nicely.
I am going to call this one "Blue Weave because it reminds me of a Navajo Indian cloth pattern.
Last edited by Pastor Rick, 1/18/2018, 5:04 pm
|
|
1/18/2018, 3:16 pm
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|
Lesigner Girl
Global Administrator
Head of Runboard staff
Registered: 11-2005
Posts: 25472
Karma: 426 (+479/-53)
|
|
Reply | Quote
|
|
Re: The "Spouzic-art" Revival
Nice! 
Your new project inspired me to try inline SVG inside CSS.
See this topic.
|
|
1/19/2018, 2:38 am
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Pastor Rick
Moderator
Registered: 07-2005
Location: Texas
Posts: 10246
Karma: 272 (+331/-59)
|
|
Reply | Quote
|
|
Re: The "Spouzic-art" Revival
Sky Globes - I made significant changes to a CSS3 pattern I found on the Internet to make this "Runboard Compatible" CSS "radial-gradient" background. The creator of the original (Auke Zwart) made the code "public domain" to encourage its use.
-------
/* CSS Background */
body {background:
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 85px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -150px -180px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 200px 105px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
linear-gradient(45deg, #26466D 0%, #2B4F81 15%, #4973AB 31%, #4981CE 42%, #1D7CF2 50%, #75A1D0 60%, #003F87 70%, #3B6AA0 80%, #36648B 90%, #344152 100%);
background-size: 225px 225px, 450px 450px, 150px 150px, 300px 300px, 250px 250px, 350px 350px, 100% 100%;
background-color: #840b2a;}
-------
|
|
1/19/2018, 4:28 am
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|
Lesigner Girl
Global Administrator
Head of Runboard staff
Registered: 11-2005
Posts: 25472
Karma: 426 (+479/-53)
|
|
Reply | Quote
|
|
Re: The "Spouzic-art" Revival
Nice!
|
|
1/19/2018, 4:36 am
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Pastor Rick
Moderator
Registered: 07-2005
Location: Texas
Posts: 10246
Karma: 272 (+331/-59)
|
|
Reply | Quote
|
|
Re: The "Spouzic-art" Revival
quote:
Lesigner Girl wrote:
Nice!
Thank you, LG
The picture doesn't do the results justice because I couldn't copy the complete pattern for the dataurl image and fit it into a post!
I would not have thought about it without your post on SVG images inspiring me.
|
|
1/19/2018, 4:44 am
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|
Add a reply
Page: 1 2 3 ... 5 6 7
You are not logged in ( login)
|
