Eureka Moment development:css
https://wiki.plecko.hr/
2026-04-25T16:46:09+00:00Eureka Moment
https://wiki.plecko.hr/
https://wiki.plecko.hr/lib/tpl/bootstrap3/images/favicon.icotext/html2019-10-31T09:04:00+00:00Anonymous (anonymous@undisclosed.example.com)development:css:box_shadow
https://wiki.plecko.hr/doku.php?id=development:css:box_shadow&rev=1572509040&do=diff
CSS: Box shadow
Adding a simple shadow to any rectangle shaped object is quite easy. Here is how to do it cross-browser.
.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}text/html2019-10-31T09:04:00+00:00Anonymous (anonymous@undisclosed.example.com)development:css:cent_bg
https://wiki.plecko.hr/doku.php?id=development:css:cent_bg&rev=1572509040&do=diff
Centering background image with CSS
Just add style to HTML
html {
width:100%;
height:100%;
background:url(logo.png) center center no-repeat;
}text/html2019-10-31T09:04:00+00:00Anonymous (anonymous@undisclosed.example.com)development:css:cent_wp
https://wiki.plecko.hr/doku.php?id=development:css:cent_wp&rev=1572509040&do=diff
Centering a web page with CSS
Web page DIV:
<div id="page-wrap"><br /> <!-- all websites HTML here --></div>
And CSS:
#page-wrap {
width: 800px;
margin: 0 auto;
}text/html2019-10-31T09:04:00+00:00Anonymous (anonymous@undisclosed.example.com)development:css:fixed_header_footer
https://wiki.plecko.hr/doku.php?id=development:css:fixed_header_footer&rev=1572509040&do=diff
Fixed header/footer with shadow
If you need a static header on the web page for a menu system, or a static footer for some data (tips perhaps?) to be displayed, here is how.
Header HTML:
<div id="header" class="shadeh">content</div>
Header CSS:text/html2019-10-31T09:04:00+00:00Anonymous (anonymous@undisclosed.example.com)development:css:force_v_scroll
https://wiki.plecko.hr/doku.php?id=development:css:force_v_scroll&rev=1572509040&do=diff
Force vertical scrollbar
This is invalid CSS, but it works in everything except Opera. The reason for this is to prevent “centering jumps” when navigating back and forth between pages with enough content to have a vertical scroll bar and pages that do not.text/html2019-10-31T09:04:00+00:00Anonymous (anonymous@undisclosed.example.com)development:css:glow_input
https://wiki.plecko.hr/doku.php?id=development:css:glow_input&rev=1572509040&do=diff
Glowing input highlight
Here is how to make a glowing text input. It glows when focused
CSS:
input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: …text/html2019-10-31T09:04:00+00:00Anonymous (anonymous@undisclosed.example.com)development:css:highlight_table_row
https://wiki.plecko.hr/doku.php?id=development:css:highlight_table_row&rev=1572509040&do=diff
Highlight table rows using CSS
In order to highlight a table row without using javascript, use the following CSS code:
tr {background-color: #000000}
tr:hover {background-color: #333333}
Or if you only want to highlight certain rows, use this CSStext/html2019-10-31T09:04:00+00:00Anonymous (anonymous@undisclosed.example.com)development:css:resize_cell
https://wiki.plecko.hr/doku.php?id=development:css:resize_cell&rev=1572509040&do=diff
Resize table cell to content using CSS
If you wish to resize a table cell to fit its content, use the following CSS code:
td {width:1%; white-space:nowrap; padding:0px 5px 0px 5px;}
Be sure to have at least one free size cell if the table has defined widthtext/html2019-10-31T09:04:00+00:00Anonymous (anonymous@undisclosed.example.com)development:css:ribbon
https://wiki.plecko.hr/doku.php?id=development:css:ribbon&rev=1572509040&do=diff
Corner ribbon (crossbrowser)
Code for drawing a ribbon in the div corner.
HTML:
<div class="wrapper"><br />
<div class="ribbon-wrapper-green">
<div class="ribbon-green">NEWS</div>
</div>
</div>
CSS:
.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
.ribbon-wrapper-green…text/html2019-10-31T09:04:00+00:00Anonymous (anonymous@undisclosed.example.com)development:css:start
https://wiki.plecko.hr/doku.php?id=development:css:start&rev=1572509040&do=diff
CSS
* Centering a web page with CSS
* Centering background image with CSS
* Corner ribbon (crossbrowser)
* CSS: Box shadow
* Fixed header/footer with shadow
* Force vertical scrollbar
* Glowing input highlight
* Highlight table rows using CSS
* Resize table cell to content using CSS
* Text shadow with CSS
* Top shadow
* Tucked cornerstext/html2019-10-31T09:04:00+00:00Anonymous (anonymous@undisclosed.example.com)development:css:text_shadow
https://wiki.plecko.hr/doku.php?id=development:css:text_shadow&rev=1572509040&do=diff
Text shadow with CSS
Adding shadows to text (and explanation of parameters)
Regular text shadow:
p { text-shadow: 1px 1px 1px #000; }
Multiple shadows:
p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }
The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow:text/html2019-10-31T09:04:00+00:00Anonymous (anonymous@undisclosed.example.com)development:css:top_shadow
https://wiki.plecko.hr/doku.php?id=development:css:top_shadow&rev=1572509040&do=diff
Top shadow
Shadow on top of the page (appears that the page is inset in browser)
CSS:
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}text/html2019-10-31T09:04:00+00:00Anonymous (anonymous@undisclosed.example.com)development:css:tucked_corners
https://wiki.plecko.hr/doku.php?id=development:css:tucked_corners&rev=1572509040&do=diff
Tucked corners
CSS tucked corners
HTML:
<div class="corners"><br /> Content</div>
CSS:
body {
background: #e6e6e6;
}
.corners {
background: #f6f6f6;
height: 700px;
margin: 50px auto;
max-width: 600px;
position: relative;
width: 80%;
-webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
-moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
}
/* Corner Effect */
.corners:after,
.corners:before {
background: #e6e6e6;
content: '';
height: 50px;
position: absolute;
t…