I have an h1 title:
<h1 class="main-heading"><span class="heading-opaque-background"><%= #post.title %></span></h1>
Absolutely positioned over a header picture:
.main-heading {
/*TEXT ON MAIN PIC*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
padding: 0;
margin: auto;
/*height: 40px;*/
color: rgba(255, 255, 255, 0.80);
font-family: 'Open Sans';
font-weight: 300;
font-size: 4vw;
height: 20%;
width: auto;
padding: 20px;
letter-spacing: 8px;
font-variant: small-caps;
text-shadow: 0 1px 0 #999999, 0 2px 0 #888888,
0 3px 0 #777777, 0 4px 0 #666666,
0 5px 0 #555555, 0 6px 0 #444444,
0 7px 0 #333333, 0 8px 7px rgba(0, 0, 0, 0.4),
0 9px 10px rgba(0, 0, 0, 0.2);
}
When I scroll down, the header moves down towards the bottom of the pic. Setting display to inline doesn't change anything.
How can I make the title stay absolutely positioned over the picture?
Here is a more complete overview of the html, to show parent classes:
<img class="project-main-pic" src="<%= Citybuilder.ProjectPic.url({#post.project_pic, #post}) %>" />
<!--f https://image.slidesharecdn.com/otpphoenixecto-170327125511/95/yurii-bodarev-otp-phoenix-ecto-three-pillars-of-elixir-58-638.jpg?cb=1490619720-->
<section id="home" class="">
<h1 class="main-heading"><span class="heading-opaque-background"><%= #post.title %></span></h1>
</section>
<div class="project-wrapper">
<section id="about" class="sec-about">
<div class="container">
<h1 class="project-title"><%= #post.title %></h1>
<!-- ADD TO FORM AND DATABASE -->
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<p class="summary-text">
<%= #post.body %>
</p>
</div>
</div>
</div>
</section>
Check it here: https://jsbin.com/cezidexase/1/edit?html,css,output
.main-heading {
margin: auto;
/*height: 40px;*/
color: rgba(255, 255, 255, 0.80);
font-family: 'Open Sans';
font-weight: 300;
font-size: 4vw;
height: 20%;
width: auto;
padding: 20px;
letter-spacing: 8px;
font-variant: small-caps;
text-shadow: 0 1px 0 #999999, 0 2px 0 #888888,
0 3px 0 #777777, 0 4px 0 #666666,
0 5px 0 #555555, 0 6px 0 #444444,
0 7px 0 #333333, 0 8px 7px rgba(0, 0, 0, 0.4),
0 9px 10px rgba(0, 0, 0, 0.2);
}
for this use
.main-heading{position: fixed; top: 0; left: 0; right: 0;}
or use special plugin for this, he re is a
sample
Related
I'm using box-shadow to create internal "border" on left and right. It works great in Chrome or Edge but in Firefox it creates "bottom border" as well. I tried prefixing with -moz- and -webkit- but unsuccessfully.
I don't know how to simulate it in chrome so please run the code in Firefox to see what I am talking about.
Also, it sometimes glitches when zooming in or out in the browser (But zooming in or out in Firefox didn't fix it)
div{
width: 150px;
height: 200px;
box-sizing: border-box;
margin: 0 auto;
background: #001f49;
display: grid;
grid-template-rows: 77% 23%;
align-items: center
}
h1{
color: white;
text-align: center;
text-transform: uppercase;
font-size:18px;
}
span{
background: white;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
box-shadow: inset -1px 0px 0 0 #001f49, inset 1px 0 0 0 #001f49, inset 0 -1px 0 0 #001f49;
-moz-box-shadow: inset -1px 0px 0 0 #001f49, inset 1px 0 0 0 #001f49, inset 0 -1px 0 0 #001f49;
-webkit-box-shadow: inset -1px 0px 0 0 #001f49, inset 1px 0 0 0 #001f49, inset 0 -1px 0 0 #001f49;
}
span::before{
background: inherit;
top: -22px;
content: '';
display: block;
height: 22px;
left: 0;
position: absolute;
right: 0;
transform: skewY(352deg);
transform-origin: 100%;
box-shadow: inset -1px 0px 0 0 #001f49, inset 1px 0 0 0 #001f49;
-moz-box-shadow: inset -1px 0px 0 0 #001f49, inset 1px 0 0 0 #001f49;
-webkit-box-shadow: inset -1px 0px 0 0 #001f49, inset 1px 0 0 0 #001f49;
}
a{
color: #ed174a;
text-decoration: none;
font-weight: bold;
font-size: 18px;
}
<div>
<h1>
Change
</h1>
<span>Pricelist</span>
</div>
I would do the whole thing differently using background and less of code:
div {
width: 150px;
height: 200px;
margin: 0 auto;
border:1px solid #001f49;
background: linear-gradient(-13deg,#0000 33%,#001f49 34%);
display: grid;
grid-template-rows: 77% 1fr;
align-items: center;
text-align: center;
}
h1 {
color: white;
text-transform: uppercase;
font-size: 18px;
}
a {
color: #ed174a;
text-decoration: none;
font-weight: bold;
font-size: 18px;
}
<div>
<h1>
Change
</h1>
<span>Pricelist</span>
</div>
I'm trying to get the Log in text to be positioned at 33% height from the parent Card-Header-Background, but instead it looks like the height is being applied to the overall card.
.Account-Details-Card-Background {
width: 780px;
height: 600px;
border-radius: 18px;
box-shadow: 0 7px 70px 0 rgba(90, 97, 105, 0.1), 0 10px 10px 0 rgba(90, 97, 105, 0.06), 0 4px 8px 0 rgba(90, 97, 105, 0.12), 0 2px 0 0 rgba(90, 97, 105, 0.11);
background-color: #ffffff;
}
.Card-Header-Background {
width: 780px;
height: 69.6px;
border-radius: 18px;
box-shadow: 0 1px 0 0 #e0e2e8, 0 -1px 0 0 #e0e2e8;
background-color: #ffffff;
}
.Label---Log-in {
width: 61px;
height: 24px;
font-family: SFProText;
font-size: 20px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: -0.5px;
text-align: center;
color: #3c5071;
}
<div class="Account-Details-Card-Background" style="margin: 17.6vh 22.9vw; position: absolute">
<div class="Card-Header-Background">
<div>
<div class="Label---Log-in text" style="margin: 33% 45%; position: absolute;">
Log in
</div>
</div>
</div>
</div>
(codepen)
First of all, don't use inline style if you don't have to.
To achieve what you want you can just use top: 33% as I did here: https://codepen.io/anon/pen/QYOdRB
Please let me know if that's what you need.
It seems obvious now, but what I needed was padding not margin.
This question already has answers here:
Are class names in CSS selectors case sensitive?
(4 answers)
Closed 4 years ago.
http://skymics.com/Energy/sampleschematic.jpg see this picture.i want my 6 boxes go on the 6 vertical lines above the picture. i dont know how to give different padding styles to this ng-repeat I have used.i have used [ng-class] but it does not work.i have serched the internet all sources talked about ng-class.i dont know if i used it correctly or not.it is nessecary .please help .
<div style="background-color: white">
<div id="container" class="row" style="padding-left: 150px">
<div class="col-md-6" ng-repeat="row in msg.payload"
ng-class=" {'evenClass': $even, 'oddClass': $odd , 'firstClass':$first,'lastClass':$last} ">
<div class="plan col-md-4">
<h3>Voltage : {{row.Voltage}}
<span ng-class="row.Switch " ng-if="row.Switch == 'OFF'"
style="background: red">{{row.Switch}}</span>
<span ng-class="row.Switch" ng-if="row.Switch == 'ON'"
style="background: green">{{row.Switch}}</span>
</h3>
<script>
$(document).ready(function () {
setInterval(function (blinker) {
$("span").fadeIn(500);
$("span").fadeOut(500);
}, 1000)
});
</script>
<div class="Amp">Amp</div>
<ul>
<li><b>P1: </b>{{row.P1}}</li>
<li><b>P2: </b>{{row.P2}}</li>
<li><b>P3: </b>{{row.P3}}</li>
<li><b>N: </b>{{row.N}}</li>
</ul>
</div>
</div>
</div>
and my css is :
<style>
body, html {
height: 100%;
margin: 0;
/*background: #303030;*/
}
.bg {
/* The image used */
background-image: url("http://skymics.com/Energy/sampleschematic.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#container {
/*margin: 100px auto;*/
text-align: center;
/*width: 892px; !*/
}
#container .plan {
font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
text-shadow: 0 1px rgba(255, 255, 255, .8);
background: #fff;
border: 1px solid #ddd;
color: #333;
padding: 20px;
/*width: 134px; !* plan width = 180 + 20 + 20 + 1 + 1 = 222px *!*/
float: left;
opacity: 0.9;
position: relative;
}
/*#container .plan:nth-child(1) {*/
/*-moz-border-radius: 5px 0 0 5px;*/
/*-webkit-border-radius: 5px 0 0 5px;*/
/*border-radius: 5px 0 0 5px;*/
/*}*/
/* --------------- */
#container h3 {
font-size: 20px;
font-weight: normal;
padding: 20px;
margin: -20px -20px 50px -20px;
background-color: #eee;
background-image: -moz-linear-gradient(#fff, #eee);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background-image: -webkit-linear-gradient(#fff, #eee);
background-image: -o-linear-gradient(#fff, #eee);
background-image: -ms-linear-gradient(#fff, #eee);
background-image: linear-gradient(#fff, #d9edf7);
}
/*#container .plan:nth-child(1) h3 {*/
/*-moz-border-radius: 5px 0 0 0;*/
/*-webkit-border-radius: 5px 0 0 0;*/
/*border-radius: 5px 0 0 0;*/
/*!*}*!*/
#container h3 span {
display: block;
font: bold 25px/100px Georgia, Serif;
color: #777;
background: #F21432;
border: 5px solid #fff;
height: 100px;
width: 100px;
margin: 10px auto -65px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
-webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
}
/* --------------- */
#container ul {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
}
#container li {
border-top: 1px solid #ddd;
padding: 10px 0;
}
/* --------------- */
#container .Amp {
position: relative;
padding: 8px 20px;
/*margin: 20px 0 0 0;*/
color: #fff;
font: bold 14px Arial, Helvetica;
text-transform: uppercase;
text-decoration: none;
/*display: inline-block;*/
background-color: #0b97c4;
background-image: -moz-linear-gradient(#0b97c4, #0b97c4);
background-image: -webkit-gradient(linear, left top, left bottom, from(#0b97c4), to(#0b97c4));
background-image: -webkit-linear-gradient(#0b97c4, #0b97c4);
background-image: -o-linear-gradient(#0b97c4, #0b97c4);
background-image: -ms-linear-gradient(#0b97c4, #0b97c4);
background-image: linear-gradient(#0b97c4, #0b97c4);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
}
.evenClass {
}
.oddClass {
}
.firstClass {
padding-top: 40px;
}
.lastClass {
}
You are using ng-class the wrong way!
The actual way of using it is as below-
ng-class="{'evenClass': $even, 'oddClass': $odd, 'firstClass': $first, 'lastClass': $last}"
And for a class defined in a single var (e.g. var className = 'bla';)-
ng-class="bla"
I need to create this button with CSS only and have an issue with box shadow. There are two different shadows on this button: one yellow, one black. The maximum what I get is this
.button {
height: 81px;
width: 250px;
text-align: center;
font-family: 'Celias_Medium', 'Open Sans:500', sans-serif;
font-size: 11px;
line-height: 3.3;
letter-spacing: 0.4px;
cursor: pointer;
outline: none;
display: block;
vertical-align: top;
padding: 23px 0 26px 0;
text-transform: uppercase;
color: #000000;
background-color: #fbfb5c;
box-shadow: 0 20px 90px -30px rgba(251, 251, 92, 0.9), 0 40px 90px -50px rgba(0, 0, 0, 0.5)
}
<div class="button">ADD 7 Activities</div>
Here is result. Is there any other solution to get this result?
try on this if u cant see it on chrome moz or safari
.button {
height: 81px;
width: 250px;
text-align: center;
font-family: 'Celias_Medium', 'Open Sans:500', sans-serif;
font-size: 11px;
line-height: 3.3;
letter-spacing: 0.4px;
cursor: pointer;
outline: none;
display: block;
vertical-align: top;
padding: 23px 0 26px 0;
text-transform: uppercase;
color: #000000;
background-color: #fbfb5c;
box-shadow: 0 20px 90px -30px rgba(251, 251, 92, 0.9), 0 40px 90px -50px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 20px 90px -30px rgba(251, 251, 92, 0.9), 0 40px 90px -50px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 20px 90px -30px rgba(251, 251, 92, 0.9), 0 40px 90px -50px rgba(0, 0, 0, 0.5);
}
hope this one works :)
Is that what you want?
.button {
height: 81px;
width: 250px;
text-align: center;
font-family: 'Celias_Medium', 'Open Sans:500', sans-serif;
font-size: 11px;
line-height: 3.3;
letter-spacing: 0.4px;
cursor: pointer;
outline: none;
display: block;
vertical-align: top;
padding: 23px 0 26px 0;
box-sizing: border-box;
text-transform: uppercase;
color: #000000;
background-color: #fbfb5c;
box-shadow: 1px 1px 70px -24px;
}
<div class="button">
ADD y activities
</div>
Generally speaking material buttons would look something like this, but I don't really know what you're asking.
.button {
height: 81px;
width: 250px;
text-align: center;
font-family: Celias_Medium, 'Open Sans:500', sans-serif;
font-size: 11px;
line-height: 3.3;
letter-spacing: .4px;
cursor: pointer;
vertical-align: top;
padding: 23px 0 26px;
box-sizing: border-box;
text-transform: uppercase;
background-color: #fbfb5c;
border-radius: 4px;
margin: 16px 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
transition: all .3s cubic-bezier(.25, .8, .25, 1)
}
.button:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22)
}
<div class="button">
Button no. 1
</div>
<div class="button">
Button no. 2
</div>
<div class="button">
Button no. 3
</div>
<div class="button">
Button no. 4
</div>
<div class="button">
Button no. 5
</div>
I'm new to web design. I want to make my page look something like the one here: http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar
where there's a rounded rectangle over the grey background that holds all the content. How do I do this?
This is the basic HTML and CSS style that page is currently using. So, they're wrapping all of their content in a <div> and applying that specific style class to the div.
HTML:
<body>
<div class="wrap">
...Content...
</div>
</body>
CSS:
body {
min-width: 0;
}
body {
color: #333333;
font: 100%/1.4 Georgia,serif;
margin: 0 auto;
max-width: 100%;
min-width: 830px;
padding: 0;
width: 62em;
}
<!--wrap class css code-->
.wrap {
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
background: none repeat scroll 0 0 #FFFFF0;
margin: 16px;
padding: 10px 0 0;
position: relative;
}