I'm trying to build a "block" on a website that contains a background image with lowered opacity, some text with regular opacity and a button with regular opacity
Currently, I'm getting the background image and text to work, but the button is stuck on the image's opacity (blends in with the background).
Here is the html:
h1,p {
text-align: center;
position:relative;
top:-70px;
position: relative;
color: navy;
}
.box1 {
width: 97.5%;
background-color: white;
position: relative;
padding-top: 200px;
padding-bottom: 200px;
padding-left: 30px;
padding-right: 30px;
margin-top: 20px;
margin-bottom: 10px;
margin-right: 1.25%;
margin-left: 1.25%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.box1::before {
content: "";
background-image: url(/static/background.jpeg);
background-size: contain;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
position: absolute;
opacity: 0.5;
}
.click {
color:rgba(0, 0, 0, 0.19)
}
<div class="box1">
<h1>Our Mission</h1>
<p>THe organization plans to complete tasks x, y, z</p>
<button class="click">Learn More</button>
</div>
Add position: relative to your .click class.
Side note: You have a duplicate position: relative in your h1, p selector.
Related
First of all excuse me for explanation if I am not up to the mark, as this is my first post in this platform, Well, I am working on overlay where it has to be shown in right side of the page with given width of say 416px and 100vh of height, but things are getting cut if I do decrease the browser window and as I am decreasing the size of the browser window the button at bottom start appearing on content of overlay which has to remain at bottom even the height is getting decreased, here is the my code as below:
.advanced-overlay {
width: 100%;
min-height: 100vh;
background-color: rgba(35, 0, 18, 0.5);
position: fixed;
z-index: 100002;
top: -41px;
left: 0;
bottom: 0;
.advance-overlay-footer {
display:flex;
justify-content: space-between;
align-items:center;
position: fixed;
right: 24px;
width:156px;
bottom: 24px;
height:6%;
}
.advanced-overlay-content {
position: relative;
// min-height: 83vh;
width: 416px;
margin-top: 108px;
margin-left: auto;
margin-right: 6px;
opacity: 1;
z-index: 100004;
border-radius: 16px 16px 16px 16px;
background-color: #f5f4f6;
box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.07),
0 19px 18px 0 rgba(0, 0, 0, 0.05), 0 8px 12px 0 rgba(0, 0, 0, 0.05),
0 1px 5px 0 rgba(0, 0, 0, 0.04), 0 0 2px 0 rgba(0, 0, 0, 0.03);
.close-advance-overlay {
position: absolute;
background-color: #fff;
width: 110px;
height: 40px;
display: flex;
border-radius: 20px;
padding: 5px 22px;
top: -18px;
right: 155px;
opacity: 1;
cursor: pointer;
img {
height: 20px;
width: 20px;
align-self: center;
}
.button-text {
align-self: center;
margin-left: 5px;
font-weight: 600;
font-size: 16px;
color: #000000;
}
}
.advnaced-overlay-content-secion {
//min-height:89vh;
width: 100%;
bottom:10%;
// height:100vh;
.select-box {
margin-top: 40px;
margin-bottom: 40px;
}
.accordinan-filter {
margin-bottom: 24px;
}
.accordian-title {
font-weight: 900;
}
.accordian-content {
margin: 0;
font-size: 16px;
}
}
}
}
.is-maximum {
height: 73vh;
overflow-y: auto;
overflow-x: hidden;
&::-webkit-scrollbar {
width: 4px;
background-color: #fff;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #d3d3d3;
}
}
<div class="advanced-overlay" v-if="toggleFilter">
<div class="advanced-overlay-content">
<div class="close-advance-overlay" #click="toggleAdvanceFilterOverlay">
<img class src="../assets/icons/close.svg" />
<span class="button-text">Close</span>
</div>
<div class="advnaced-overlay-content-secion is-maximum">
<div class="select-box"></div>
<div class="accordinan-filter"></div>
</div>
<div class="advance-overlay-footer">...two buttons</div>
</div>
</div>
So, I what I would like to achieve eventually is that, I want respsonsive overlay at right side of the browser window, provided if I am decreasing height of the browser the buttons at bottom should stay there (fixed position) and content should be within limit of .advnaced-overlay-content-secion
for a responsive design I recommend you to read into the use of grid and espacially for mobile designs also the use of #media breakpoints.
for having some thing to stick at the bottom simply use:
position: fixed;
bottom: 0;
I have trouble with vertical alignment of some google icons inside buttons. I tried to play with padding and margin but I could not fix the issue.
This is a screenshot of the problem: as you can see the icon are placed slightly higher:
This is part of the html, each button is more or less the same:
<div id="mainToolbar">
<button id="buttonPencil" data-tool="yes" data-type="draw" title="Use pencil" class="button" onclick="changeTool(0);">
<i class="material-icons">brush</i>
</button>
</div>
This is the css for the button:
.button {
margin: auto;
display: inline-block;
margin-top: 5px;
color: black;
border: 0px solid grey;
border-radius: 6px;
background-color: #EFEFEF;
text-align: center;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 4;
vertical-align: middle;
}
.button {
width: 50px;
height: 40px;
}
.button:hover {
background-color: #aaaaaa !important;
color: white !important;
}
And finally the css for the div:
#mainToolbar {
position: absolute;
top: 0px;
left: 0px;
height: 520px;
width: 60px;
z-index: 10;
text-align: center;
}
How can I put the icon right in the middle of the button (both vertically and horizontally)? Thanks.
You can use absolute positioning along with translate to position the icon right in the middle. Be sure to add a position:relative on the button so that the icon is positioned w.r.t to the button.
.button {
margin: auto;
display: inline-block;
margin-top: 5px;
color: black;
border: 0px solid grey;
border-radius: 6px;
background-color: #EFEFEF;
text-align: center;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 4;
vertical-align: middle;
}
.button {
width: 50px;
height: 40px;
position: relative;
}
.button:hover {
background-color: #aaaaaa !important;
color: white !important;
}
.button:active i{
/*for push effect on click*/
transform: translate(-45%, -45%);
}
.button i {
/*horizontal and vertical centering*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#mainToolbar {
position: absolute;
top: 0px;
left: 0px;
height: 520px;
width: 60px;
z-index: 10;
text-align: center;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div id="mainToolbar">
<button id="buttonPencil" data-tool="yes" data-type="draw" title="Use pencil" class="button" onclick="changeTool(0);">
<i class="material-icons">brush</i>
</button>
</div>
To explain:
top:50% with a position: absolute will move the icon down 50% of the parent's height. A translateY with -50% will move the icon up by half its height so that its aligned right in the middle by its center. Similarly with horizontal centering.
Its Working Fine see snippet
.button {
margin: auto;
display: inline-block;
margin-top: 5px;
color: black;
border: 0px solid grey;
border-radius: 6px;
background-color: #EFEFEF;
text-align: center;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 4;
vertical-align: middle;
}
.button {
width: 50px;
height: 40px;
}
.button:hover {
background-color: #aaaaaa !important;
color: white !important;
}
And finally the css for the div:
#mainToolbar {
position: absolute;
top: 0px;
left: 0px;
height: 520px;
width: 60px;
z-index: 10;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="mainToolbar">
<button id="buttonPencil" data-tool="yes" data-type="draw" title="Use pencil" class="button" onclick="changeTool(0);">
<i class="fa fa-leaf"></i>
</button>
</div>
I want hover effect on div, I have applied bottom style when hover on div and everything is working but when hover border/edge of the div means the div jerking/jumping continuously.
my code :
.traning-box {
background: #fff;
padding-top: 70px;
padding-bottom: 30px;
box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
border-radius: 5px;
width: 120px;
text-align: center;
}
.traning-box:hover {
bottom: 15px;
position: relative;
}
<div class="traning-box">
<p> Test box</p>
</div>
Try to use :after pseudo-element. When the .traning-box goes up, the :after goes down, so the cursor will still over the .traning-box (because it is a parent block for the :after).
.traning-box {
background: #fff;
border-radius: 5px;
box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
padding-top: 70px;
padding-bottom: 30px;
position: relative;
text-align: center;
width: 120px;
}
.traning-box:after {
bottom: 0;
display: block;
content: '';
height: 15px;
left: 0;
position: absolute;
width: 100%;
}
.traning-box:hover {
margin-top: -15px;
}
.traning-box:hover:after {
bottom: -15px;
}
<div class="traning-box">
<p>Test box</p>
</div>
You could use animation to achieve it.
.traning-box {
background: #fff;
padding-top: 70px;
padding-bottom: 30px;
box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
border-radius: 5px;
width: 120px;
text-align: center;
margin:20px;
position:relative;
}
.traning-box:hover {
animation-name:move;
animation-duration:1s;
animation-iteration-count:1;
animation-timing-function: ease;
position: relative;
border:1px solid red;
}
#keyframes move{
50%{
transform:translateY(-15px);
}
}
<div class="traning-box">
<p> Test box</p>
</div>
You need to use transition and translate together to achieve smooth hover effect.
.traning-box {
background: #fff;
padding-top: 70px;
padding-bottom: 30px;
box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
border-radius: 5px;
width: 120px;
text-align: center;
transition: all 0.5s linear;
}
.traning-box:hover {
transform: translateY(-15px);
position: relative;
}
<div class="traning-box">
<p> Test box</p>
</div>
Try below. You have to use inner div to write a hover effect.
.traning-box{
background: #fff;
padding-top: 70px;
padding-bottom: 30px;
box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
border-radius: 5px;
width: 120px;
text-align: center;
}
.traning-box1 {width:120px;}
.traning-box1:hover .traning-box{
bottom: 15px;
position: relative;
}
<br/>
<br/>
<div class="traning-box1">
<div class="traning-box">
<p> Test box</p>
</div>
</div>
I'm trying to add a box shadow on two elements, each with variable width. My desired result looks like this:
I've been trying to get to this result with a pseudo element covering the overlapping box shadows, but because they need to have transparency, I can't seem to find a solution in which there are neither small overlaps at the edges of the boxes nor the pseudo element adjusts to the correct width.
The top box does also not necessarily need a top border to solve my problem.
Fiddle
HTML:
<div>
<p></p>
</div>
<div>
<p></p>
</div>
SCSS:
div {
display: inline-block;
margin: 75px;
width: 200px;
height: 50px;
position: relative;
p {
position: absolute;
top: 100%;
left: 0;
height: 300px;
width: 250px;
}
&, p {
background: #ededed;
}
}
div:last-child p {
width: 150px
}
div {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
p {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
}
Edit:
Normally I wouldn't consider JS for layout but since in my particular case the boxes won't be visible until a user interaction occurs, I've used a script to solve my problem.
The script figures out if the top element is bigger than the bottom one when the dom is ready and adds a "big" or "small" class to it respectively. By knowing that, we know which element the pseudo-element's width should inherit. As long as the elements don't get resized in a way that would change which element is bigger, this works fine.
There is also a much cleaner solution without the need for JS and one pseudo element less in case one only needs box-sizing blur and no spread.
Fiddles:
Blur and spread combined (JS),
Only blur, no spread (No JS)
The end result is not quite perfect as you can see in this screenshot where all the white background is replaced with black:
When you look at the left box's top left, you can see that the border shadow has a slight curve.
Anyway, it's close enough to me.
If someone finds a solution with a similar result as in the first fiddle using only css, I would really appreciate it.
You have an easy solution for this, but it is an experimental feature and it has limited support.
Using a filter: drop shadow on the base element, the drop shadow applies to the composite result of this element, and all the descendants
div {
display: inline-block;
margin: 75px;
width: 150px;
height: 50px;
position: relative;
-webkit-filter: drop-shadow(0px 0px 5px rgba(255, 0,0,0.7));
filter: drop-shadow(0px 0px 2px red);
}
div p {
position: absolute;
top: 100%;
left: 0;
height: 300px;
width: 250px;
margin: 0px;
}
div, div p {
background: #ededed;
}
#second p {
width: 100px;
}
<div>
<p></p>
</div>
<div id="second">
<p></p>
</div>
An alternate approach, that will run in any browser, using pseudo elements for the shadows:
div {
display: inline-block;
margin: 75px;
width: 150px;
height: 50px;
position: relative;
}
div p {
position: absolute;
top: 100%;
left: 0;
height: 300px;
width: 250px;
margin: 0px;
}
div, div p {
background: #ededed;
}
#second p {
width: 100px;
}
div:after, p:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
box-shadow: 0px 0px 2px 6px rgba(0,255,0,0.7);
z-index: -10;
}
<div>
<p></p>
</div>
<div id="second">
<p></p>
</div>
An alternate approach is to clip the shadows. That is poorly suported, and needs lots of manual adjustements, but the end result is probably the best looking.
Demo working only in webkit
div {
display: inline-block;
margin: 75px;
width: 300px;
height: 50px;
position: absolute;
}
div p {
position: absolute;
top: 100%;
left: 0;
height: 100px;
width: 200px;
margin: 0px;
}
div, div p {
background: #ededed;
}
div:after, p:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
box-shadow: 0px 0px 15px 15px rgba(255,0,0,0.2);
z-index: -10;
}
p:after {
-webkit-clip-path: polygon(0% 30px, 230px 30px, 260px 60px, 100% 100%, 0% 100%);
}
div:after {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 260px 100%, 230px 80px, 0% 80px);
}
<div>
<p></p>
</div>
If you really need a plain color background instead of a background image, this shall work:
I used a div to create the empty area.
<div class="shad">
<div class="cover1"></div>
<p></p>
</div>
<div class="shad">
<div class="cover2"></div>
<p></p>
</div>
The paragraphs are set to same size as div.shad.
div.shad {
display: inline-block;
margin: 75px;
width: 250px;
height: 350px;
position: relative;
background: #ededed;
p {
position: absolute;
top: 0%;
left: 0;
width: 250px;
height: 350px;
}
.cover1 {
position: relative;
float: right;
margin-top: -2px;
margin-right: -2px;
width: 50px;
height: 50px;
background-color: white;
border-left: 2px solid rgba(0, 0, 0, 0.2);
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}
.cover2 {
position: relative;
float: right;
margin-top: 50px;
margin-right: -2px;
width: 50px;
height: 300px;
background-color: white;
border-top: 2px solid rgba(0, 0, 0, 0.2);
border-left: 2px solid rgba(0, 0, 0, 0.2);
}
}
div.shad {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
I have two DIVs inside each other. The inner DIV contains an image. I'm trying to add a floating text over that image in the top right corner. I can't figure out how to make that text to use inner DIV's positions instead of the outer one.
Here is what I got so far
CSS:
html {
background: #EEF0F3;
}
.outer {
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
margin: 0 auto;
padding:20px 0px;
position: relative;
width: 680px;
text-align: center;
margin-bottom: 20px;
}
.inner {
position: relative;
}
h2 {
position: absolute;
top: 0px;
right: 0px;
}
h2 span {
color: white;
font: bold 24px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgba(255, 0, 0, 0.5);
padding: 0px 10px;
}
HTML:
<div class="outer">
<div class="inner">
<h2><span>Title 1</span></h2>
<img src="1.jpg">
</div>
</div>
And here is the code in JSFiddle
http://jsfiddle.net/UM8ea/
If I set positioning to:
h2 {
position: absolute;
top: 20px;
right: -20px;
}
I get the desired result, but that feels like workaround rather than a solution.
Its very simple.
Check this fiddle
.outer {
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
margin: 0 auto;
padding:20px 0px;
position: relative;
width: 680px;
text-align: center;
margin-bottom: 20px;
}
for h2
h2
{
position: absolute;
top: 5px;
right: 20px;
margin:0;
}
You have this behaviour because .outer is wider than the image, and then, .inner too. The h2 is positioned related to .inner, and go to right.
If you set .outer to have 640px width (as the image) you get the desired result.
Other solution is to set margin: 0 20px; on .inner
If you want the text positioned all top the image you can set h2 {margin:0;} in both cases.