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.
Related
There is annoying thing in Firefox that it can't handle clipping (antialiasing?) of rounded corner elements, especially if there are multiple backgrounds. In some scenarios (non-absolute elements I guess) it can be solved by setting background-clip: content-box inside a class but in other cases it can't be solver that way even with any other properties. Although, Chrome does not creating this problems (or have better working with clipping under the hood). Here some examples based on my scenarios that I managed to recreate with snippets and screenshot of results in different browsers.
Please don't offer me to get rid of multiple backgrounds and blend modes because I need it due to css doesn't support gradient transitions.
body {
margin: 0;
}
.wrapper {
position: relative;
padding: 20px;
background-color: #2B3351;
}
.child {
display: inline-block;
position: relative;
padding: 24px 48px;
text-align: center;
font-family: "Raleway", sans-serif;
font-weight: 900;
font-size: 18px;
text-transform: uppercase;
align-items: center;
color: rgba(255, 255, 255, 0.6);
border-radius: 34px;
background-color: #181B34;
background-image: linear-gradient(160deg, #e6e7f9 11.77%, #ebebfb 74.75%);
background-blend-mode: multiply;
box-shadow: -10px -10px 15px rgba(165, 206, 255, 0.1), 10px 10px 20px rgba(0, 0, 0, 0.35), inset 0 0 0 rgba(165, 206, 255,0), inset 0 0 0 rgba(0,0,0,0);
margin: 24px 0;
background-clip: content-box;
}
.absolute {
position: absolute;
background-color: #030b33bf;
background-image: linear-gradient(160deg, #e7ecfd, #FfffFF);
background-blend-mode: multiply;
width: 24px;
height: 24px;
border-radius: 50%;
transform: translate(150px, -60px);
box-shadow: -3px -3px 5px rgba(0, 6, 39, 0), 4px 4px 8px rgba(0, 6, 39, .35);
background-clip: border-box;
}
<div class="wrapper">
<div class ="child"></div>
<div class="absolute"></div>
</div>
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
I have a series of scroll links throughout my website and am trying to get them to maintain the same height responsively so when one now has to use two rows the others change height to stay consistent. I came across a couple solutions on here which I'll get into in a sec. First let me show you the code.
body {
background-color: #000;
}
.full_section {
width: 100%;
height: auto;
}
.Pro_Qual_s_link_frame {
margin: 7em 0 11em 0;
padding: 2em 0 2em 0;
display: block;
}
.quarter_section {
width: 25%;
height: auto;
}
.Pro_Qual_s_link_container {
float: left;
padding: 2em 0 2em 0;
display: block;
}
.Pro_Qual_s_link {
width: 77%;
margin: auto;
padding: 2em 0 2em 0;
border-radius: 0.44em;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Roboto', sans-serif;
}
.color_style_b_1 {
border-style: ridge;
border-color: #888;
border-width: .11em;
color: #e0e0e0;
background-color: rgba(150, 150, 150, 0.11);
box-shadow: 0 0 3em rgba(222, 222, 222, 0.44);
text-shadow: 0 0 1em rgba(222, 222, 222, 0.88);
}
.color_style_g_1 {
border-style: ridge;
border-color: #55ED2B;
border-width: .11em;
color: #B5FFB8;
background-color: rgba(10, 61, 12, 0.11);
box-shadow: 0 0 3em rgba(137, 237, 55, 0.44);
text-shadow: 0 0 1em rgba(137, 237, 55, 0.88);
}
.color_style_k_1 {
border-style: ridge;
border-width: .11em;
border-color: #DB3016;
color: #FFAF69;
background-color: rgba(102, 0, 0, 0.11);
text-shadow: 0 0 1em rgba(214, 73, 34, 0.88);
box-shadow: 0 0 3em rgba(214, 73, 34, 0.44);
}
.color_style_j_1 {
border-style: ridge;
border-width: .11em;
border-color: #633191;
color: #CD9AFC;
background-color: rgba(67, 3, 150, 0.11);
text-shadow: 0 0 1em rgba(140, 0, 255, 0.88);
box-shadow: 0 0 3em rgba(140, 0, 255, 0.44);
}
<div id="Personal_Strengths_link_frame" class="full_section Pro_Qual_s_link_frame">
<div class="quarter_section Pro_Qual_s_link_container">
<a class="Pro_Qual_s_link color_style_k_1" href="#html">
Back To Top
</a>
</div>
<div class="quarter_section Pro_Qual_s_link_container">
<a class="Pro_Qual_s_link color_style_b_1" href="#Specialty_Practices_frame">
Specialty Practices
</a>
</div>
<div class="quarter_section Pro_Qual_s_link_container">
<a class="Pro_Qual_s_link color_style_g_1" href="#Industries_Served_frame">
Industries I've Served
</a>
</div>
<div class="quarter_section Pro_Qual_s_link_container">
<a class="Pro_Qual_s_link color_style_j_1" href="#Tools_of_Choice_frame">
My Tools Of Choice
</a>
</div>
</div>
JSfiddle
https://jsfiddle.net/Optiq/2xcuq6rs/3/
Here's the few solutions I've tried
Ok, so the first solution I found was to change the containing element's display to table and the elements inside of it to table-cell. In my instance I changed .Pro_Qual_s_link_frame to have the display of table and the .Pro_Qual_s_link to have the display of table-cell
I did this because the .Pro_Qual_s_link_container is there as part of the framework to keep everything tamed responsively. This didn't work, it also made the link as big as the Pro_Qual_s_link_container element. I tried playing with the height and width to see if I could get it to work, nothing happened.
Next I found a solution on here suggesting using flex. I set that up like this
.Pro_Qual_s_link_frame{
margin: 7em 0 11em 0;
padding: 2em 0 2em 0;
display: flex;
}
.Pro_Qual_s_link{
width: 77%;
margin:auto;
padding: 2em 0 2em 0;
border-radius: 0.44em;
text-align: center;
text-decoration: none;
font-family: 'Roboto', sans-serif;
flex: 1;
}
Not only did this not work, but it seems to have canceled out the width and padding. When I scale the size down I see 2 extra boxes pop up on each element like it's creating a new box for the second row of text. I played around more with various different settings like switching from percentages to em and it still didn't effect it.
I played around with the display settings on the 3 elements to see if I could come up with a combo of the two solutions that worked and nothing panned out. Did I do something wrong or miss a step somewhere? Or do I need a different solution for my particular instance?
You had some weird margins etc with your solution which made it not work with flex. Here's a working example using flex.
body {
background-color: #000;
}
* {
box-sizing: border-box;
}
.full_section {
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.Pro_Qual_s_link_frame {
margin: 7em 0 11em 0;
padding: 2em 0 2em 0;
}
.quarter_section {
width: 25%;
height: auto;
flex: 1;
}
.Pro_Qual_s_link_container {
width: 25%;
padding: 2em 0 2em 0;
display: block;
}
.Pro_Qual_s_link {
width: 77%;
height: 100%;
margin: auto;
padding: 2em 0 2em 0;
border-radius: 0.44em;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Roboto', sans-serif;
}
.color_style_b_1 {
border-style: ridge;
border-color: #888;
border-width: .11em;
color: #e0e0e0;
background-color: rgba(150, 150, 150, 0.11);
box-shadow: 0 0 3em rgba(222, 222, 222, 0.44);
text-shadow: 0 0 1em rgba(222, 222, 222, 0.88);
}
.color_style_g_1 {
border-style: ridge;
border-color: #55ED2B;
border-width: .11em;
color: #B5FFB8;
background-color: rgba(10, 61, 12, 0.11);
box-shadow: 0 0 3em rgba(137, 237, 55, 0.44);
text-shadow: 0 0 1em rgba(137, 237, 55, 0.88);
}
.color_style_k_1 {
border-style: ridge;
border-width: .11em;
border-color: #DB3016;
color: #FFAF69;
background-color: rgba(102, 0, 0, 0.11);
text-shadow: 0 0 1em rgba(214, 73, 34, 0.88);
box-shadow: 0 0 3em rgba(214, 73, 34, 0.44);
}
.color_style_j_1 {
border-style: ridge;
border-width: .11em;
border-color: #633191;
color: #CD9AFC;
background-color: rgba(67, 3, 150, 0.11);
text-shadow: 0 0 1em rgba(140, 0, 255, 0.88);
box-shadow: 0 0 3em rgba(140, 0, 255, 0.44);
}
<div id="Personal_Strengths_link_frame" class="full_section Pro_Qual_s_link_frame">
<div class="quarter_section Pro_Qual_s_link_container">
<a class="Pro_Qual_s_link color_style_k_1" href="#html">
Back To Top
</a>
</div>
<div class="quarter_section Pro_Qual_s_link_container">
<a class="Pro_Qual_s_link color_style_b_1" href="#Specialty_Practices_frame">
Specialty Practices
</a>
</div>
<div class="quarter_section Pro_Qual_s_link_container">
<a class="Pro_Qual_s_link color_style_g_1" href="#Industries_Served_frame">
Industries I've Served
</a>
</div>
<div class="quarter_section Pro_Qual_s_link_container">
<a class="Pro_Qual_s_link color_style_j_1" href="#Tools_of_Choice_frame">
My Tools Of Choice
</a>
</div>
</div>
Here's a JSFiddle: https://jsfiddle.net/thepio/dh0jbwou/
A solution using display-table instead of flexbox (flexbox is great but if you need IE compatibility, you can't use it) :
HTML
<div id="Personal_Strengths_link_frame" class="full_section Pro_Qual_s_link_frame">
<div class="Pro_Qual_s_link_container color_style_k_1">
<a class="Pro_Qual_s_link" href="#html">
Back To Top
</a>
</div>
<div class="Pro_Qual_s_link_container color_style_b_1">
<a class="Pro_Qual_s_link" href="#Specialty_Practices_frame">
Specialty Practices
</a>
</div>
<div class="Pro_Qual_s_link_container color_style_g_1">
<a class="Pro_Qual_s_link" href="#Industries_Served_frame">
Industries I've Served
</a>
</div>
<div class="Pro_Qual_s_link_container color_style_j_1">
<a class="Pro_Qual_s_link" href="#Tools_of_Choice_frame">
My Tools Of Choice
</a>
</div>
</div>
CSS
body{
background-color: #000;
}
.full_section {
width: 100%;
height: auto;
}
.Pro_Qual_s_link_frame {
margin: 7em 0 11em 0;
padding: 1em 0 1em 0;
display: table;
border-spacing: 30px;
}
.Pro_Qual_s_link_container {
border-radius: 0.44em;
border-style: ridge;
border-width: .11em;
display: table-cell;
padding: 2em 0 2em 0;
width: 25%;
}
.Pro_Qual_s_link {
display: block;
color: inherit;
font-family: 'Roboto', sans-serif;
margin:auto;
padding: 2em 0 2em 0;
text-align: center;
text-decoration: none;
}
.color_style_b_1 {
border-color: #888;
color: #e0e0e0;
background-color: rgba(150, 150, 150, 0.11);
box-shadow: 0 0 3em rgba(222, 222, 222, 0.44);
text-shadow: 0 0 1em rgba(222, 222, 222, 0.88);
}
.color_style_g_1 {
border-color: #55ED2B;
color: #B5FFB8;
background-color: rgba(10, 61, 12, 0.11);
box-shadow: 0 0 3em rgba(137, 237, 55, 0.44);
text-shadow: 0 0 1em rgba(137, 237, 55, 0.88);
}
.color_style_k_1 {
border-color: #DB3016;
color: #FFAF69;
background-color: rgba(102, 0, 0, 0.11);
text-shadow: 0 0 1em rgba(214, 73, 34, 0.88);
box-shadow: 0 0 3em rgba(214, 73, 34, 0.44);
}
.color_style_j_1 {
border-color: #633191;
color: #CD9AFC;
background-color: rgba(67, 3, 150, 0.11);
text-shadow: 0 0 1em rgba(140, 0, 255, 0.88);
box-shadow: 0 0 3em rgba(140, 0, 255, 0.44);
}
Working Fiddle
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 have the following markup.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="wrapper">
<div id="container">
<div id="navigation">
</div>
</div>
</div>
</body>
</html>
With the following CSS
body
{
width: 100%;
background-color: #E4E4E4;
font-size: 16px;
line-height: 19px;
font-family: Cambria, Georgia, serif;
}
div#wrapper
{
width: 960px;
margin: 0 auto;
background-image: url("nav_bg.png");
background-repeat: no-repeat;
background-position: center 219px;
}
div#container
{
width: 920px;
background-color: #F9EADE;
box-shadow: 0 0 15px 5px rgb(31, 73, 125);
margin: 0 auto;
}
div#navigation
{
height: 50px;
margin-bottom: 200px;
background-color: rgb(31, 73, 125);
box-shadow: 0px 10px 4px -4px rgba(0, 0, 0, 0.8);
}
The nav_bg.png is this
And I get white unshadowed space in the bottom left and right
If I change the code to this
div#navigation
{
height: 50px;
margin-bottom: 200px;
background-color: rgb(31, 73, 125);
box-shadow: 0px 10px 4px 0px rgba(0, 0, 0, 0.8);
}
I get additional shadow on left and right sides as this.
And If I remove background-color and border-shadow from the div#navigation as follows.
div#navigation
{
height: 50px;
margin-bottom: 200px;
}
I get this
Sorry I messesd up the question real bad before.
You could also just make the div little wider so it would reach to the sides.
If you could show the code, I could show you how.
EDIT:
Just add minus margin to left and right to navigation and add width so it would reach the sides what you need
margin: 0 -20px 200px;
width: 947px;
EDIT2:
If this does not work then there is something that you are not showing or you're doing it wrong.
body
{
width: 100%;
background-color: #E4E4E4;
font-size: 16px;
line-height: 19px;
font-family: Cambria, Georgia, serif;
}
div#wrapper
{
width: 960px;
margin: 0 auto;
background-image: url("oBecq.png");
background-repeat: no-repeat;
background-position: center 219px;
}
div#container
{
width: 920px;
background-color: #F9EADE;
box-shadow: 0 0 15px 5px rgb(31, 73, 125);
margin: 0 auto;
height: 500px;
}
div#navigation
{
height: 50px;
margin: 0 -10px 200px;
background-color: rgb(31, 73, 125);
box-shadow: 0px 10px 4px -4px rgba(0, 0, 0, 0.8);
top: 219px;
position: relative;
width: 950px;
}
This is because you have the shadow spread property set to -4px (the fourth number)
Set it to 0 and it will appear as you wish.
box-shadow: 0 10px 2px 0px rgba(0, 0, 0, 0.8);
http://jsfiddle.net/Kyle_Sevenoaks/evd4K/