HOME | DD
gillianivyart — Challenge - Week 3
#css #challenge #theme #themechallenge #journalskin #weeklychallenge #journalskincss #cssbabeschallenge #csschallenge
Published: 2015-06-15 11:00:04 +0000 UTC; Views: 1575; Favourites: 2; Downloads: 0
Redirect to original
Description
body div#devskin12236669 * { background:none; border:none; padding:0; margin:0; } body div#devskin12236669 .gr1, body div#devskin12236669 .gr2, body div#devskin12236669 .gr3, body div#devskin12236669 .tri, body div#devskin12236669 .gr-top img, body div#devskin12236669 .indent { display:none; } body div#devskin12236669 .gr-box { max-width:900px; margin-left:auto; margin-right:auto; overflow:hidden; font-family:Arial,sans-serif; font-size:14px; color:#000; text-align:left; text-decoration:none; background:#F4F4F4 url(https://fc02.deviantart.net/fs70/o/2014/253/2/b/481486018_1903093_brushed_alu.png) repeat; } body div#devskin12236669 .gr { padding-left:0px!important; margin:0px; } body div#devskin12236669 .gr-top { background:transparent url(https://fc01.deviantart.net/fs71/o/2014/253/d/6/481486018_1903094_xblack.png) no-repeat left top; border:none; padding:70px 0 70px 0px; text-align:center; font-size:14px; color:#000; text-decoration:none; } body div#devskin12236669 h2, body div#devskin12236669 h2 a { background:transparent; color:#fff!important; letter-spacing:2px; font-size:50px; font-weight:bold; text-align:center; border:none; } body div#devskin12236669 h2 a:hover, body div#devskin12236669 h2 a:visited { border-top:none; color:#fff!important; } body div#devskin12236669 .timestamp { display:none; } body div#devskin12236669 .gr-body { background:transparent; border:none; overflow:visible!important; position:static!important; } body div#devskin12236669 .text { padding:20px; margin:-30px 0 -40px 0; } body div#devskin12236669 p { margin-top:10px; margin-bottom:10px; padding:6px; color:#fff; background-color:rgb(128, 128, 128); background-color:rgba(128, 128, 128, 0.3); } body div#devskin12236669 blockquote { background:url(https://fc04.deviantart.net/fs71/o/2014/253/c/d/481486018_1903095_quotes.png) no-repeat left top; padding-left:70px; margin:5px 45px 5px 35px; color:#7F7F7F; } body div#devskin12236669 h1 { font-size:30px; color:#000; font-weight:bold; letter-spacing:1px; border-bottom:#000 1px solid; } body div#devskin12236669 .text h2 { font-size:26px; color:#404040!important; font-weight:bold; letter-spacing:1px; text-align:left !important; border-bottom:#404040 1px solid; } body div#devskin12236669 h3 { font-size:22px; color:#000; font-weight:bold; letter-spacing:1px; border-bottom:#000 1px solid; } body div#devskin12236669 h4 { font-size:20px; color:#404040; font-weight:bold; letter-spacing:1px; border-bottom:#404040 1px solid; } body div#devskin12236669 h5 { font-size:18px; color:#404040; font-weight:bold; letter-spacing:1px; border-bottom:#404040 1px solid; margin-bottom:0px; } body div#devskin12236669 h6 { font-size:16px; color:#000; font-weight:bold; letter-spacing:1px; border-bottom:#000 1px solid; margin-bottom:0px; } body div#devskin12236669 hr { border:0; height:1px; background-image:rgba(0,0,0,0); background-image: -webkit-linear-gradient(left,rgba(0,0, 0, 1), rgba(0,0, 0, 1)); background-image: -moz-linear-gradient(left,rgba(0,0, 0, 1), rgba(0,0, 0, 1)); background-image:linear-gradient(left,rgba(0,0, 0, 1), rgba(0,0, 0, 1)); } body div#devskin12236669 b, body div#devskin12236669 u, body div#devskin12236669 sup { color:#000; } body div#devskin12236669 strong, body div#devskin12236669 tt, body div#devskin12236669 sub { color:#808080; } body div#devskin12236669 code, body div#devskin12236669 small { color:#C0C0C0; } body div#devskin12236669 acronym { color:#C0C0C0; font-weight:bold; } body div#devskin12236669 .abbr { color:#7F7F7F; border-bottom:#7F7F7F dotted 1px; } body div#devskin12236669 ins { color:#fff; background:rgb(0, 0, 0); background:rgba(0, 0, 0, 0.5); padding:0 4px; text-decoration:none; } body div#devskin12236669 ol { color:#7F7F7F; margin-left:20px; font-style:italic; } body div#devskin12236669 ul { list-style:url(https://fc05.deviantart.net/fs71/o/2014/253/b/6/481486018_1903096_bulletblack.gif); color:#000; margin-left:20px; } body div#devskin12236669 a.external:after { display:none!important; } body div#devskin12236669 .text a:not(.external) { font-weight:normal; } body div#devskin12236669 a:link { color:#a8A8A8; text-decoration:none; } body div#devskin12236669 a:visited { color:#7C4848; text-decoration:none; } body div#devskin12236669 a:hover { color:#B87878!important; text-decoration:none; } body div#devskin12236669 .f.a, body div#devskin12236669 .f { background:transparent; } body div#devskin12236669 ul.list, body div#devskin12236669 .hsep, body div#devskin12236669 .prevlink { display:none; } body div#devskin12236669 .shadow { display:inline-block; } body div#devskin12236669 .thumb { margin:10px; background-color:#ccc; outline:6px solid #ccc; transition:all 0.2s; -moz-transition:all 0.2s; -webkit-transition:all 0.2s; -ms-transition:all 0.2s; -o-transition:all 0.2s; vertical-align:middle; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin12236669 .thumb:hover { background-color:#303030; outline:12px solid #303030; } body div#devskin12236669 .daembed, body div#devskin12236669 iframe, body div#devskin12236669 .embedded-image-deviation img { margin:10px; background-color:#ccc; outline:6px solid #ccc; transition:all 0.2s; -moz-transition:all 0.2s; -webkit-transition:all 0.2s; -ms-transition:all 0.2s; -o-transition:all 0.2s; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin12236669 .daembed:hover, body div#devskin12236669 iframe:hover, body div#devskin12236669 .embedded-image-deviation img:hover { background-color:#303030; outline:15px solid #303030; } body div#devskin12236669 em .thumb { margin:0; height:auto; width:auto; border:none; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; background:none; padding:0; overflow:hidden; background-color:none; outline:none; vertical-align:middle; } body div#devskin12236669 em .thumb:hover { border:none; background-color:none; outline:none; background:none; } body div#devskin12236669 .bottom { padding:65px 20px 20px 0; height:30px; text-align:right; background:transparent url(https://fc01.deviantart.net/fs71/o/2014/253/d/6/481486018_1903094_xblack.png) no-repeat left bottom; } body div#devskin12236669 .commentslink { font-weight:bold; font-size:30px; color:#fff!important; letter-spacing:1px; text-decoration:none; } body div#devskin12236669 .commentslink:hover { color:#a8A8A8!important; } body div#devskin12236669 a.lit img.lit { border:none!important; } body div#devskin12236669 a.lit img.journal { border:none!important; } body div#devskin12236669 a.lit { outline:6px solid #ccc; transition:all 0.2s; -moz-transition:all 0.2s; -webkit-transition:all 0.2s; -ms-transition:all 0.2s; -o-transition:all 0.2s; background:transparent; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; margin:10px; padding:15px; } body div#devskin12236669 a.lit:hover { background-color:#303030; outline:12px solid #303030; } body div#devskin12236669 a.lit q { font-size:12px; color:#000; background:transparent; padding:5px; } body div#devskin12236669 a.lit q:hover { color:#fff; } body div#devskin12236669 a.lit strong { font-size:16px; color:#C0C0C0; background:transparent; } body div#devskin12236669 img.lit { border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; box-shadow:none!important; -moz-box-shadow:none!important; -webkit-box-shadow:none!important; padding:0px!important; } body div#devskin12236669 .topmenu { color:#fff; text-align:right; font-style:italic; font-size:16px; padding:5px; margin-top:-10px; position:absolute; top:15px; right:10px; z-index:21; } body div#devskin12236669 .topmenu a { color:#fff; padding:3px; border:none!important; } body div#devskin12236669 .topmenu a:hover { color:#a8A8A8!important; } body div#devskin12236669 .author { background:#000; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; color:#fff; text-align:left; font-size:12pt; font-weight:bold; height:16px; width:17px; overflow:hidden; position:absolute; bottom:10px; margin:0 0 0 -15px; } body div#devskin12236669 .author:hover { width:auto; }
|||Gallery || Profile || +devWatch |||
Theme Challenge: Rural NightsSuggested by Quiless
A few weeks ago I camped out in our backyard with marshmallows roasting over the crackling fire pit. The moon was full and the air had a chill to it. I live in a pretty rural area, where, on a clear night, all you can see are stars. Have you ever slept under the night's sky? Or do you day dream about getting away from the city lights and enjoying the dark and calm, no hum of electricity... Let the night inspire you to create a journal skin theme.
Create a journal skin, gallery or custom box bg/widget or other journal/profile resource using the theme for this week. Add the hashtag #CSSChallenge to your deviation or description. (no longer using #cssbabeschallenge exclusively, you can use either tag, I'll check for both)
All skins tagged will be featured in the next week's challenge. Late entries will be featured in the next one and so on. For example, if you enter week 1 during week 3, it would be featured on week 4. This way, it doesn't matter when you join or which challenge you do, everyone gets featured without having to back pedal to previous. I'll check the tag each week and add in any new ones. If you're skipped, comment on that journal and I'll add in the next.
InspirationNight skies and log cabins, woods and crickets chirping. What inspires you when you hear the words 'Rural Nights'?
Theme Challenge : CSS AnimationSuggested by Quiless
Let the elements transition or transform size, opacity, backgrounds, colors, etc. They can spin or fade, zoom up close or slide away. But don't limit yourself to animations available on dA CSS, you could use animated gifs to create moving backgrounds and glows, crazy borders or blinking lights. Explore the codes dA lets us use of CSS3. (edit) Please use sensibly.
Inspiration
SuggestionsThank you everyone who has thrown suggestions at us. We may be filled up for the year, but we might do multiple suggestions all at once. So keep pitching us your ideas, tell us what inspires you, or what you love. Is there a skin to match your mood? Suggest it!
CSS Tutorials and Tips
A new one from my Frequently Referenced Collection , this tutorial is written by Quiless who brought us both of these suggestions. Check out his tutorial on transitions and maybe incorporate both ideas into one.
#CSSChallenge FeatureThis article will be crossposting to journalcss as well as CSS-Babes , hence the change of skin. I will be designing a custom skin for the challenge, but in the meantime, we'll be using this. Other journal groups are welcomed to include this in their journals or galleries. If you wish me to cross-post, I will need blog access to your group. These will post on Mondays.
- Challenge - Week 1 : Galaxies
- Challenge - Week 2 : Portfolio
Share your Tips & Tricks! © CSS JMTH/poserfan
Related content
Comments: 26
hehe - I'd love to see what you come up with
👍: 0 ⏩: 1
Aww, I won't be participating. I have lots of other things to do.
👍: 0 ⏩: 1
Maybe some other time...! (still eagerly waiting for your surprize!! 
👍: 0 ⏩: 0
Hope your skin can be an inspiration ;D I picked that one for the lovely hover effects. And yes, you are a challenge! hahahaha!
👍: 0 ⏩: 1
Well, I have lot of things going around me. So, I won't be able to participate. I am however eager to see what others come up with.
👍: 0 ⏩: 1
Spread the good word then ;D Share a status, poll or journal about it. Challenge your watchers to join the challenge.
👍: 0 ⏩: 0
It's a bit sad to see that no one entered so far :/
👍: 0 ⏩: 1
I know, I need to get on it as well, it will help inspire. But it is meant to be a challenge that people can attempt every week or any week. A challenge for themselves to try if they aren't a skinner. I'm posting tips and tutorials, etc on every journal, so maybe it will inspire newcomers to create something. I think Andorada might be planning something
👍: 0 ⏩: 1
awww, GillianIvy , now I really have to deliver!! 
👍: 0 ⏩: 1
Why yes, of course, left-handed and double left-handed people are great. My Mom is left-handed, though she only has the one ;D
👍: 0 ⏩: 1
👍: 0 ⏩: 1
My left hand is a dummy.
👍: 0 ⏩: 1
Hope I will have something to show you by tomorrow
👍: 0 ⏩: 1
Um about "you could use animated gifs to create moving backgrounds and glows"....
FAQ #69: Can I use animated images within my journal, journal CSS or journal background?
But I guess slighty glowing would be ok..
👍: 0 ⏩: 2
Added to the article ;D
👍: 0 ⏩: 1
Yes, epilepsy is a consideration. Had no idea there was a FAQ about it. I have seen some rather flashy profile pages. I avoid them, even though I have never had any issue of that sort. I like smooth animations with a bit of glow. Thanks for pointing out that issue.
👍: 0 ⏩: 1
Me either, I just found it like a month or so ago
👍: 0 ⏩: 1
Maybe it is a newer issue, but 69 is a low number. 
👍: 0 ⏩: 1
It is
Me too 
👍: 0 ⏩: 1
Though I am distracted by skins anyways. I read an article thrice over. Once to look it up and down, again to hover all the links and images, and finally to actually read it.
👍: 0 ⏩: 1
Lol
👍: 0 ⏩: 1
hahahaha! Hmmm, I think I'll add that to the challenge queue!
👍: 0 ⏩: 1