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 ... 5  6  7 

 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator

Registered: 07-2005
Location: Texas
Posts: 10244
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."

Image

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


---

Advertise Boards On TRDConceptsDE
1/17/2018, 6:10 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: 3298
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.







---

Whoosh-ChelSierra-Muse-Twi-Saga
1/18/2018, 1:09 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: 10244
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}
-------

Image

What do I call this pattern?

---

Advertise Boards On TRDConceptsDE
1/18/2018, 2:29 am Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Head of Runboard staff

Registered: 11-2005
Posts: 25449
Karma: 425 (+478/-53)
Reply | Quote
Re: The "Spouzic-art" Revival


Great job getting that to look like plaid! It looks really nice. emoticon

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.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
1/18/2018, 5:56 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Head of Runboard staff

Registered: 11-2005
Posts: 25449
Karma: 425 (+478/-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.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
1/18/2018, 6:26 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator

Registered: 07-2005
Location: Texas
Posts: 10244
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


---

Advertise Boards On TRDConceptsDE
1/18/2018, 3:16 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Head of Runboard staff

Registered: 11-2005
Posts: 25449
Karma: 425 (+478/-53)
Reply | Quote
Re: The "Spouzic-art" Revival


Nice! emoticon

Your new project inspired me to try inline SVG inside CSS. emoticon

See this topic.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
1/19/2018, 2:38 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator

Registered: 07-2005
Location: Texas
Posts: 10244
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;}
-------

Image

---

Advertise Boards On TRDConceptsDE
1/19/2018, 4:28 am Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Head of Runboard staff

Registered: 11-2005
Posts: 25449
Karma: 425 (+478/-53)
Reply | Quote
Re: The "Spouzic-art" Revival


Nice! emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
1/19/2018, 4:36 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator

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


quote:

Lesigner Girl wrote:

Nice! emoticon



Thank you, LG emoticon

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. emoticon

---

Advertise Boards On TRDConceptsDE
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)