VoyForums: Css Extreme

[ Show ]

Support VoyForums

[ Shrink ]

VoyForums Announcement: Programming and providing support for this service has been a labor of love since 1997. We are one of the few services online who values our users' privacy, and have never sold your information. We have even fought hard to defend your privacy in legal cases; however, we've done it with almost no financial support -- paying out of pocket to continue providing the service. Due to the issues imposed on us by advertisers, we also stopped hosting most ads on the forums many years ago. We hope you appreciate our efforts.

Show your support by donating any amount. (Note: We are still technically a for-profit company, so your contribution is not tax-deductible.) PayPal Acct: Feedback:

Donate to VoyForums (PayPal):

[ Login ] [ Contact Forum Admin ] [ Post a new message ] [ Search | Check update time ]

CSS Extreme

(1) Bing.com search engine
(2) Google Search was invented in 1998
(3) Mapquest.com: Search for directions

(4) top websites from Alexa rankings

(5) welcome to the Yahoo homepage

(6) Wikipedia. The Free Encyclopedia

(7) Wikipedia works best when Zionists stay out. wikiwiki.

(8) this is ridiculous

(9) this is even more ridiculous...omg

(10) this is insane

(11) this might work despite extreme features

(12) The Strong emphasis

(13 )The half one

(14) The nice dots on bottom

---------------

here's how each of these lines would look when grouped together.
note: this is for demonstrative purposes only.
...obviously, HTML and CSS is not meant to be grouped together.
and, of course,
CSS code must be within <style type="text/css"> </ style> tags.

The following are grouped together for easy reference: ----- <a href="http://bing.com/" onclick="window.open(this.href); return false" class="e">(1) Bing.com search engine</a> .e {text-decoration:none} .e:hover {color: orange; text-decoration: none; background-color:#00baba;} -------------------------------- <a href="https://www.google.com/" onclick="window.open(this.href); return false" class="G">(2) Google Search was invented in 1998</a> .g {text-decoration:none; color: red;} .G:hover {text-decoration: underline; background-color:#00baba;} -------------------------------- <a href="http://www.mapquest.com/" onclick="window.open(this.href); return false" class="maps">(3) Mapquest.com: Search for directions</a> .maps {text-decoration:none} .maps:hover { word-spacing: 1ex;} --------------------------------- <a href="http://www.alexa.com/topsites" onclick="window.open(this.href); return false" class="tiger">(4) top websites from Alexa rankings</a> .tiger {text-decoration:none} .tiger:hover {color: green; text-decoration: none; border-style: dotted;} -------------------------------------- <a href="https://www.yahoo.com/" onclick="window.open(this.href); return false" class="yahoo">(5) welcome to the Yahoo homepage</a> .yahoo {text-decoration:none; background-color:yellow;} .yahoo:hover { text-transform: capitalize;} ----------------------------------- <a href="http://www.wikipedia.com/" onclick="window.open(this.href); return false" class="wiki">(6) Wikipedia. The Free Encyclopedia</a> .wiki:hover { border-style: solid; border-width: 5px;} ----------------------------------- <a href="http://www.wikipedia.com/" onclick="window.open(this.href); return false" class="wikiwiki">(7) Wikipedia works best when Zionists stay out. wikiwiki.</a> .wikiwiki {text-decoration:none} .wikiwiki:hover { border-style: solid; border-width: 1px; border-color: #D9E0F0; text-decoration: underline;} --------------------------------- <a href="http://www.wikipedia.com/" onclick="window.open(this.href); return false" class="zztop"> this is ridiculous</a> .zztop {font-style: italic;} .zztop:hover { font-family: sans-serif;} --------------------------------- continued below continued below continued below

<p> <a href="http://www.wikipedia.com/" onclick="window.open(this.href); return false" class="omg">(9) this is even more ridiculous...omg</a> .omg:hover { font-family: sans-serif; font-variant: small-caps; font-size: large;; text-decoration: none; border-style: solid; border-width: 1px; border-color: #BFCCE6; } ----------------------------------- <p> <a href="http://www.wikipedia.com/" onclick="window.open(this.href); return false" class="insane">this is insane</a> .insane:hover {font-weight: 900; word-spacing: 1ex; letter-spacing: 0.3ex;} ------------------------------- <p> <a href="http://www.wikipedia.com/" onclick="window.open(this.href); return false" class="itworks">(11) this might work despite extreme features</a> .itworks:hover {border-style: outset;} -------------------------------- <a href="http://www.wikipedia.com/" onclick="window.open(this.href); return false" class="strongone">(12) The Strong emphasis</a> .strongone:hover {font-weight: 550; border-style: ridge;} --------------------------------- <p> <a href="http://www.wikipedia.com/" onclick="window.open(this.href); return false" class="halfone">(13 )The half one</a> .halfone:hover {font-weight: 550; border-bottom-style: ridge;} ----------------------------------- <a href="http://www.wikipedia.com/" onclick="window.open(this.href); return false" class="nicedots">(14) The nice dots on bottom</a> .nicedots:hover { background-color:#D9E0F0; border-bottom-style: dotted;} <style type="text/css"> c:hover { color: orange; text-decoration: none; background-color:#00baba;} .suddenchange:hover { background-color:black; color: white;} .suddenchanges:hover {background-image: url(http://3.bp.blogspot.com/-jKQ_d1CSSJM/VU7AMviHWFI/AAAAAAAABTk/nUtpzVQ6Uxw/s1600/griddy-bg.gif; );color: yellow;} .suddenchanges3:hover {background-image: url(http://4.bp.blogspot.com/-j8CAL5o4fKw/VJi0BfHViKI/AAAAAAAAA_E/2-Fqz43u22s/s1600/33739438_xxlfrom123rf.com%2Ballrightsreserved.jpg; );color: yellow;} </style>

please scroll to bottom-of-page for a more accurate method of implementing this code:

There are no messages in the main index.

Post a message:
This forum requires an account to post.
[ Create Account ]
[ Login ]

here's how CSS code is implemented onto a website:
(notice, the CSS is all enclosed within within <style type="text/css"> </ style> tags.

entire blogs or newspaper articles can also be highlighted
This can produce undesired effects, though.
If you choose this method, only slight color variants would be recommended.

in the following 2 examples, I will be using very noticeable color-changes.
[just for demonstration. (large variables are hurtful to the eyes, and not recommended)]

hello
helloo
hellooo
helloooo

gumba
gumbaa
gumbaaa
gumbaaaa

anything can be done with CSS.
using the Hover feature,
you could even make a new background appear.
It's not recommended for any practical use, though.
But, it just shows how anything can be done using the Hover feature.

a normal paragraph or blog is now given a background image
each time a mouse cursor scrolls over.

Perhaps, a more simple background should be used.

here's an example of a simple background placed within a paragraph.
(it's stationary, and not using the scrolling feature).
voy/233983
You'll notice, it's barely noticeable that a background image is being used. ....It's smooth boxy blue.
and it's all contained within the ASMR-Updates II paragraph.

here's another example of a stationary image within a blog:
voy/232986/

<div style="background-image:url(http://4.bp.blogspot.com/-j8CAL5o4fKw/VJi0BfHViKI/AAAAAAAAA_E/2-Fqz43u22s/s1600/33739438_xxlfrom123rf.com%2Ballrightsreserved.jpg); width:99%; padding:5px; color:#333333; font-size:21px; text-align:justify; "> <center> <a href="https://youtu.be/AsIuVKZ8-0Q" target="_blank" class="cbc2">Arguing with Communists/ Class system</a> </center> </div>

for office use only:
-------------------
css overkill

(1)The Suddenchange button. IT changes too much (2) This is suddenchanges button.
------------------------------------------

[ Contact Forum Admin ]

Forum timezone: GMT-8
VF Version: 3.00b, ConfDB:
Before posting please read our privacy policy.
VoyForums^(tm) is a Free Service from Voyager Info-Systems.
Copyright © 1998-2019 Voyager Info-Systems. All Rights Reserved.