Im trying to serve some CSS to my webapp using rocket.rs but it doesn't seem to render
This is what I've tried so far and when i spin up the web app i can access localhost:8000/style.css and it does exist however it just doesn't render
#[get("/style.css")]
fn serve_css() -> &'static str {
r#"
.notes {
list-style: none;
margin: 0;
padding: 0;
}
.notes li {
position: relative;
width: 30%;
padding: 1em 1.5em;
margin: 1em;
background: #ffb;
overflow: hidden;
box-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.notes li:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #eea #eea;
background: #eea;
box-shadow: 0 1px 1px rgba(0,0,0,0.2), -1px 1px 1px rgba(0,0,0,0.1);
}
"#
I have got the sylesheet linked at the top of my html body
<link rel="stylesheet" href="style.css">
I needed to change the return type to RawCSS and return RawCSS instead of just a string
Related
how can i create this shape via css ?
Example
Here is an example of a paper folding effect achieved via CSS.
The key here is the box shadow which is positioned over the div using :before
HTML
<div class="note">
</div>
CSS
.note {
position: relative;
width: 30%;
padding: 1em 1.5em;
margin: 2em auto;
color: #fff;
background: #97C02F;
overflow: hidden;
}
.note:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #658E15 #658E15;
background: #658E15;
box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
Codepen example https://codepen.io/Washable/pen/BJqMJd
I'm trying to make an inset pill using pure CSS:
Where the two color blocks are clickable separately.
But I can't figure out how to apply the box shadow to the containing element. The closest I got was using an :after element and positioning it over the links; but that covers up the links, making them un-clickable:
(jsFiddle)
<div class="pill">
✚
⦿
</div><!--/.pill-->
.pill {
position: relative;
float: left;
&:after {
content: "";
display: block;
border-radius: 8px;
box-shadow: inset 1px 2px 0 rgba(0,0,0,.35);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
a {
display: block;
padding: 4px 6px;
text-decoration: none;
color: #fff;
float: left;
&.plus {
background: #3c55b1;
border-radius: 8px 0 0 8px;
border-right: 1px solid darken(#3c55b1, 30%);
}
&.circle {
background: #40be84;
border-radius: 0 8px 8px 0;
border-left: 1px solid lighten(#40be84, 15%);
}
}
}
I'm aware of the pointer-events property, but browser support is pretty shabby.
So what do we think? Possible?
You are not using the spread property on the box shadow, so you want to create a border, instead using box shadow add a border to each element.
Remove the:after property and will get the normal behavior
jsFiddle
Make it simple,
draw your box-shadow from a, so it doesn't matter wich size they take.
http://codepen.io/gcyrillus/pen/xwcKg
.pill {
position: relative;
float: left;
background:#eee;
padding:0.5em;
}
a {
display: inline-block;
padding: 4px 6px;
width:1em;
text-align:center;
text-decoration: none;
color: #fff;
font-weight:bold;
box-shadow:inset 1px 2px 0 rgba(0,0,0,.35);
}
.plus {
background: #3c55b1;
border-radius: 8px 0 0 8px;
border-right: 1px solid #0c2571;
position:relative;
}
.circle {
background: #40be84;
border-radius: 0 8px 8px 0;
box-shadow:
inset 0px 2px 0 rgba(0,0,0,.35),
inset 1px 0 0 #70de94
;
}
I'm working on a CSS layout for my page, I'm just having a problem. On first page view the navbar loads all out of whack, but after page refresh, everything looks fine, here's an example:
Before:
After:
I'm not sure why it would be doing this I'm kind of new to CSS, any information would be great thanks!
Here's the CSS:
html, body {
margin: 0px;
}
.navbar-fixed {
background: -webkit-linear-gradient(top, #fff 0, #eee 85%, #ddd 100%);
border-top: 1px solid black;
border-bottom: 1px solid black;
border-radius: 3px;
box-shadow: 1px 1px 4px #e5e5e5;
position: fixed;
right: 0;
left: 0;
top: 0;
width: 100%;
}
.navbar-fixed ul {
display: inline-block;
margin: 0;
padding: 0;
}
.navbar-fixed ul li {
display: inline-block;
}
.navbar-fixed .logo a {
line-height: 50px;
padding: 0;
font-size: 32px;
letter-spacing: -3px;
transition: 0.3s;
font-weight: bold;
color: orange;
text-decoration: none;
text-shadow: 2px 2px 3px black;
margin: 0 2em 0 1em;
}
.navbar-fixed .logo a:hover {
text-shadow: 1px 1px 7px black;
color: white;
background: transparent;
}
.navbar-fixed ul.nav {
float: right;
}
.navbar-fixed ul.nav li a {
padding: 1em;
display: block;
color: #00AAEE;
cursor: pointer;
border: solid 0 1px 0 1px transparent;
transition: 0.5s;
text-decoration: none;
}
.navbar-fixed ul li a:hover, ul li.active a {
background-color: darkgrey;
border-color: #ccc;
color: white;
}
.container {
margin: 0 auto;
width: 70%;
}
.newswindow {
padding: 1em;
color: #fff;
background-color: rgba(0, 0, 0, 0.75);
position: absolute;
bottom: 0;
left: 0;
}
.newswindow h2 {
font-size: 42px;
border-bottom: 1px solid white;
letter-spacing: -2px;
}
.newswindow p {
font-size: 18px;
}
Some browser specific default styles could be interfering your defined styles. (Inherited styles, default more specifically defined styles for certain elements...)
For homogenous behavior in all browsers, use a CSS reset and define all the needed styles properly, not depending on browsers' defaults.
Here is a good source:
http://meyerweb.com/eric/tools/css/reset/
I have a poll setup using a script to pull it into my WP page. Via http://quipol.com/
EG <script src="poolfromquipol">
I've found the styles via firebug and have customized them accordingly within, but I'm wondering if there's a way I could implement them for the styles to actually take effect?
Here's what I'm trying to do:
#quipol-container #quipol {
-moz-border-radius: 4px 4px 4px 4px;
-moz-box-shadow: 0 0 0 1px #FFFFFF inset;
background: none repeat scroll 0 0 white;
border: 0 none;
height: 464px;
margin: 0;
padding: 14px 14px 0;
position: relative;
width: 360px;
}
#quipol-container #quipol #quipol-corner {
background: none repeat scroll 0 0 transparent;
height: 65px;
left: -6px;
position: absolute;
top: -6px;
width: 65px;
z-index: 1000;
}
#quipol-container #quipol #quipol-corner a {
background: none;
display: none;
height: 21px;
margin: 9px 0 0 10px;
opacity: 1;
text-indent: -9999px;
width: 21px;
}
#quipol-container {
-moz-border-radius: 8px 8px 8px 8px;
-moz-box-shadow: 0 0 0 1px #FFFFFF inset;
background: none;
border: none;
height: 590px;
margin: 0 auto;
padding: 4px;
position: relative;
width: 390px;
}
Anybody know how / where I can display: none some of the default styles?
They appear to be generating iframes to display the poll in. You will not be able to style the iframe (nor access it via JavaScript), as it's being accessed cross-domain.
This is often intentional, as they usually don't want you display:noneing their logos.
Over the last year, I noticed that lots of sites have moved their share/popularity stats to a left sidebar that remains visible on the screen even if you scroll the window down. Here is the URL for a page that has this kind of functionality: http://news.cnet.com/8301-31921_3-57371426-281/anti-sopa-forces-have-isp-snooping-bill-in-their-crosshairs
What's the best way to create that kind of sidebar?
an easy way is to use CSS to absolutely position it and set the Z index so that it appears above everything else
try this on your HTML page
<style>
.side-sharebar {
display: block;
left: 482px;
position: fixed;
top: 20px;
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #EEEEEE;
border-color: #CCCCCC transparent #CCCCCC #CCCCCC;
border-radius: 3px 0 0 3px;
border-style: solid;
border-width: 1px;
box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.25) inset, 0 1px 0 #FFFFFF inset;
left: auto !important;
margin-left: -98px;
margin-top: 2px;
position: absolute;
top: 0;
width: 76px;
}
.side-sharebar ul li {
border-bottom: 1px solid #CCCCCC;
box-shadow: 0 1px 0 #FFFFFF;
padding: 10px 2px 10px 0;
position: relative;
text-align: center;
}
.side-sharebar ul {
list-style: none outside none;
}
</style>
....
<div class="side-sharebar"><ul><li>one</li><li>two</li></ul></div>