I want to create a very simple image viewer. When you click a thumbnail, a large version of that thumbnail should open on a black background with 0.8 opacity. That image...
may not exceed 80% of the window height.
may not exceed 80% of the window width.
should be centerd horizontally and vertically.
should always keeps it aspect ratio.
may not be a background image.
should not be changed with javascript.
My biggest problem is that the height of the image inside the div exceed that 80% window height (80wh) when you check it on mobile devices (see Chrome's device toolbar). The strangest thing is that my div is working fine: it's maximum height is 80vh... Here's my code, perhaps somebody sees the mistake I'm making:
#gallery {
overflow: hidden;
}
.Gallery {
align-items: center;
background: rgba(0, 0, 0, 0.85);
display: flex;
justify-content: center;
height: 100%;
position: fixed;
width: 100%;
z-index: 10;
}
.Gallery-imageWrapper {
max-height: 80%;
max-width: 80%;
position: relative;
}
.Gallery-close {
background: rgb(21, 21, 21);
color: rgb(255, 255, 255);
display: block;
font-weight: 700;
height: 20px;
line-height: 20px;
position: absolute;
right: 0;
text-align: center;
text-decoration: none;
top: 0;
width: 20px;
}
.Gallery-image {
max-height: 100%;
max-width: 100%;
}
<div class="Gallery">
<div class="Gallery-imageWrapper">
<a class="Gallery-close" href="#" title="Sluiten">x</a>
<img class="Gallery-image" src="https://placehold.it/600x600" alt="Screenshot website Optiek Cardoen" title="Website Optiek Cardoen">
</div>
</div>
I tried other CSS properties like object fit, width, height, position, ... on the image element, but nothing seems to fix it. Anyone who can help me please? :)
Thx!
If you can use viewport units, try with vmin - equal to the smaller of vw and vh.
Key style:
.Gallery-image {
max-width: 80vmin;
max-height: 80vmin;
}
Full demo:
.Gallery {
background: rgba(0, 0, 0, 0.85);
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.Gallery-imageWrapper {
position: relative;
}
.Gallery-close {
background: rgb(21, 21, 21);
color: rgb(255, 255, 255);
position: absolute;
font-weight: 700;
right: 0;
top: 0;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
text-decoration: none;
}
.Gallery-image {
max-width: 80vmin;
max-height: 80vmin;
}
<div class="Gallery">
<div class="Gallery-imageWrapper">
<a class="Gallery-close" href="#" title="Sluiten">x</a>
<img class="Gallery-image" src="https://placehold.it/600x600" alt="Screenshot website Optiek Cardoen" title="Website Optiek Cardoen">
</div>
</div>
In addition:
CSS selectors are generally case-insensitive; this includes class and ID selectors. Make sure you keep it consistent.
Related
I want to put watermark-text at the center of page. but it's not work it always go to the left of page. I try to use top and left with the #background element but the font-size of #watermark-text get smaller how can I put #watermark-text in the center without change the font-size.
#background {
position: absolute;
background: white;
z-index: 0;
}
#content {
z-index: 1;
}
#watermark-text {
position: absolute;
color: #eae9e9;
font-weight: bold;
font-size: 800px;
}
<div id="background">
<p id="watermark-text">WaterMark</p>
</div>
<div id="content" </div>
I've used display: flex; align-items: center; justify-content: center; on the parent to center the child horizontally and vertically and in order to achieve that we need to set a height and a width to the parent.
#background {
height: 100vh;
width: 100%;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
#content {
z-index: 1;
}
#watermark-text {
color: #eae9e9;
font-weight: bold;
font-size: 800px;
}
<div id="background">
<p id="watermark-text">WaterMark</p>
</div>
<div id="content"> </div>
If by watermark you mean text that overlays the screen with text then you can do it very simply by setting the body to position: relative. This means that when we set the background div with position: absolute and inset:0, the watermark is positioned relative to the body element. This makes the background div cover the whole page.
Use grid and place-items center to put the text in the center of the screen. I've coloured the background and set opacity on the text so you can see that it's overlaid the content.
Note: I've set the font size a percentage of the viewport width using the vw unit so as you make the screen bigger, the watermark increases in size to suit. You can set this to a pixel value or, even better, rem or em.
If you want the watermark not to move with the screen scroll, change position: absolute to position: fixed.
Any questions, just pop a comment in and I'll respond.
body {
position: relative;
margin: 0;
}
#background {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #eae9e9;
background-color: rgba(0, 192, 0, 0.5);
opacity: 0.5;
font-weight: bold;
font-size: 15vw;
}
<div id="background">WaterMark</div>
<div id="content">
<img src='https://picsum.photos/id/237/400/900'>
</div>
#background {
position: fixed;
background: white;
width: 100vw;
height: 100vh;
top: 0px;
left: 0px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
z-index: -10;
}
#content {
z-index: 10;
width: 100vw;
height: 100vh;
color: black;
}
#watermark-text {
color: #eae9e9;
font-weight: bold;
font-size: 800px;
}
<div id="background">
<p id="watermark-text">WaterMark</p>
</div>
<div id="content">jlsgdfjlgdsfjodfgjoifdgjasfddddddddddds<br>joiasjoidsajoasfds </div>
This is how I would do it looks strange in the editor but should work perfectly on the page, alternative you can just set a background to the div itself where to content is, be aware that this won't be secure as anyone can just change the HTML and CSS clientside anyway.
.watermark {
/* Used to position the watermark */
position: relative;
}
.watermark__inner {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Absolute position */
left: 0px;
position: absolute;
top: 0px;
/* Take full size */
height: 100%;
width: 100%;
}
.watermark__body {
/* Text color */
color: rgba(0, 0, 0, 0.2);
/* Text styles */
font-size: 3rem;
font-weight: bold;
text-transform: uppercase;
/* Rotate the text */
transform: rotate(-45deg);
/* Disable the selection */
user-select: none;
}
I have been trying to get the header image to be shorter, however, I cannot figure out how to. Here is the HTML:
<div class="header">
<img src="images/header_sea(3).jpg" width="99%" class="header_image" alt="sea_sky">
<div class="header_title title"> *.• ʚ welcome to my ocean! ɞ •.* </div>
</div>
Here is the CSS:
html, body {
height: 100%;
width: 99%;
text-align: center;
}
.title{
font-family: 'Poppins', sans-serif;
font-size: 45px;
font-weight: bold;
color: #FB79E1;
text-align: center;
text-shadow: 3px 3px white;
}
.header{
position: relative;
}
.header_image{
opacity: 0.55;
height: 40%;
width: 99%;
}
.header_title{
position:absolute;
top: 0;
left: 0;
height: 100%;
width: 99%;
display: flex;
justify-content: center;
align-items: center;
}
I tried adjusting the height percentage in .header_image, but the image doesn't get shorter when I change the value.
The header needs a size associated with it. Otherwise the image has nothing to be "40%" of since the header is just using auto sizing.
Relevant code
.header {
position: relative;
/* Give the header (containing element) a size, can be %, px, etc.
Also keep in mind to use a percentage as a size the body needs a percentage size as well */
height: 20%;
}
Another good practice is to use semantic elements when possible, so consider using <header> instead of a div with a class of header.
html,
body {
height: 100%;
width: 99%;
text-align: center;
}
.title {
font-family: 'Poppins', sans-serif;
font-size: 45px;
font-weight: bold;
color: #FB79E1;
text-align: center;
text-shadow: 3px 3px white;
}
.header {
position: relative;
/* Give the header (containing element) a size, can be %, px, etc.
Also keep in mind to use a percentage as a size the body needs a percentage size as well */
height: 20%;
}
.header_image {
opacity: 0.55;
height: 100%;
width: 99%;
}
.header_title {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 99%;
display: flex;
justify-content: center;
align-items: center;
}
<header class="header">
<img src="https://98e50e5e-ef9b-4f10-9bb4-65acdcdf4429.id.repl.co/images/header_sea(3).jpg" class="header_image" alt="sea_sky">
<div class="header_title title"> *.• ʚ welcome to my ocean! ɞ •.* </div>
</header>
try removing the width attribute from the image (inline) and change the width in .header_image
I did it for you below
<div class="header">
<img src="https://98e50e5e-ef9b-4f10-9bb4-65acdcdf4429.id.repl.co/images/header_sea(3).jpg"
class="header_image"
alt="sea_sky"
/>
<div class="header_title title"> *.• ʚ welcome to my ocean! ɞ •.* </div>
</div>
.header_image{
opacity: 0.55;
height: 40%;
width: 70%;
}
I'm trying to give this simple calculator app I'm making a 'light sheen', like what you'd see on a phone screen under light. What I've done is I've put a div for the light sheen inside the containing div which is the phone shape, but I can't make it so overflow is hidden for the light sheen div.
Hopefully the current code snippets help:
<div class="phone-container">
<div class="light-sheen"></div>
<div class="upper-icons">
.phone-container {
height: 750px;
width: 400px;
background: rgb(0, 0, 0);
border-radius: 60px;
border: 5px solid rgb(172, 172, 172);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 20px;
padding-bottom: 50px;
overflow: hidden;
}
.light-sheen {
width: 900px;
height: 450px;
background-color: white;
position: absolute;
bottom: 0px;
transform: rotateZ(-35deg);
opacity: 0.1;
}
Any help is appreciated, thanks!
Since you use position: absolute; on light-sheen, it's not possible to hide the overflow part.
Make light-sheen position: relative; instead.
.light-sheen {
width: 900px;
height: 450px;
background-color: white;
position: relative;
bottom: 0px;
transform: rotateZ(-35deg);
opacity: 0.1;
}
Is there any way of adding a filter (CSS or other type) to an element so this filter then effectively applies to the element below it.
I have an element with reduced opacity, that sits on top of a background image. I would like the element with reduced opacity to basically apply a black and white filter to the part of the element directly below it (effectively working as a mask). In the example below this means that the part of the image below the white box has the filter applied to it.
https://codepen.io/emilychews/pen/zWjWxo
Two things to note:
1) Because I'm using vh and vw units and the layout changes dependent on device / window size, I can't slice the image in photoshop or similar and then add or align it separately.
2) The image placeholder service I'm using serves up random images, and sometimes the image in the example is black and white - please don't let this confuse the issue.
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
#row-1 {
position: relative;
width: 80vw;
height: 70vh;
background: red;
border: 1px solid black;
background-image: url("https://loremflickr.com/320/240");
background-size: cover;
}
#inner {
background: rgba(255, 255, 255, .8);
position: absolute;
width: 50%;
height: 40%;
right: 0;
top: 0;
padding: 1rem;
}
<div id="row-1">
<div id="inner">
<p id="text">Some Text</p>
</div>
</div>
Short answer - no. But there is a non-standard -webkit-back-drop filter that works in iOS, but it's only available in other browsers behind an experimental flag.
https://webdesign.tutsplus.com/tutorials/css-backdrop-filters--cms-27314
(SVG 1.1 had a mechanism to do this, but the spec was poorly written and only IE10+ ever implemented it (and they may have backed it out))
You can try mix-blend-mode
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
#row-1 {
position: relative;
width: 80vw;
height: 70vh;
background: red;
border: 1px solid black;
background-image: url("https://loremflickr.com/320/240");
background-size: cover;
}
#inner {
background: rgba(255, 255, 255, .8);
position: absolute;
width: 50%;
height: 40%;
right: 0;
top: 0;
padding: 1rem;
mix-blend-mode: exclusion;
}
<div id="row-1">
<div id="inner">
<p id="text"></p>
</div>
</div>
Please, try this solution I have made on Codepen. You can play around with the Z-index & opacity in background-color.
It uses the :after pseudo element to make some sort of filter. Being stretched all over the div with an absolute position, everything underneath it will be affected.
I hope it can help you!
HTML:
<div class="box">
<p>Hello world!</p>
</div>
CSS:
.box {
position: relative;
width: 400px;
height: 300px;
background: url(http://farm2.staticflickr.com/1486/23990047223_5b7a0c82e8_b.jpg);
background-size: cover;
margin: 0 auto 100px;
z-index: 1;
}
.box:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
// change color opacity here!
background-color: rgba(0, 0, 0, 0.5);
}
// styling
.box p {
margin: 0;
font-size: 26px;
text-align: center;
color: white;
padding-top: 50px;
position: relative;
z-index: 0;
}
I want something like this (the pink circle): CSS quarter circle 100vh example.
So far, I have a half-circle (see CSS below), but when I try to make it 100vh, it stretches and I can't figure out how to keep it proportional.
.circle {
height: 180px;
width: 90px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background: red;
margin: 100px;
position: absolute;}
Any insights greatly appreciated. Thanks
I modified the code to only use 200vh to calculate both width and height of circle. This will give you a perfect circle at any screen size.
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100vw;height:100vh}
.box {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.box > .circle {
height: 200vh;
width: 200vh;
position: absolute;
bottom: -100vh;
right: -100vh;
border-radius: 50%;
background: hotpink;
}
<div class="box">
<div class="circle"></div>
</div>
You can do it like this:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100vw;height:100vh}
.box {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.box > .circle {
height: 200vh;
width: 125.5vw; /* if exactly 16:9 vw/vh aspect ratio */
position: absolute;
bottom: -100vh;
right: -56.250vw; /* if exactly 16:9 vw/vh aspect ratio */
border-radius: 50%;
background: hotpink;
}
<div class="box">
<div class="circle"></div>
</div>
Conclusion: This works perfectly if the screen viewport is exactly at 16:9 aspect ratio (see it inside the editor (not "Run code snippet") without Menu Bar & Bookmarks Toolbar but better to see it in full screen), anything else than that fails so I wouldn't recommend using viewport units for this task. If anyone can prove me wrong or do it better, go ahead.
And with px:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
.box {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.box > .circle {
height: 180px;
width: 180px;
position: absolute;
bottom: -90px;
right: -90px;
border-radius: 50%;
background: hotpink;
}
<div class="box">
<div class="circle"></div>
</div>
you can start to keep the box into the ratio you want and center it when it doesn't fill the whole screen (=> downscaling to fit within the screen)
to size things, you can relay on %, vw,vh,vmax and or vmin units.
basicly you can start with size and max-size using the viewport as reference for the main box:
height:100%;
width:100%;
max-width:179vh;/* height viewport*/
max-height:56vw;/* width viewport*/
to align content you can use the flex display and margins and position.
To draw that 1/4 circle, you need a square that is at least the height of your box if it is to be drawn from border-radius. ( else a radial-gradient would do just fine).
for the vertical text, you may take a look at writing-mode.
A mix of CSS3 rules and positionning method can allow to do something that is about fluid.
Run the snippet below in fullpage and resize your window (heigh/width/both) your browser to see behavior.(or play with the codepen)
html {
height: 100%;
display: flex;
background: #ccc;
}
body {
margin: auto;
background: linear-gradient( to right, rgb(231, 231, 231) 25%, rgb(225, 207, 207) 25%);
height: 100%;
width: 100%;
max-width: 179vh;
max-height: 56vw;
display: flex;
align-items: center;
overflow: hidden;
position: relative;
box-shadow: 0 0 0 2px;
/* debug , see me */
}
/* make div be squares */
div:before {
content: "";
display: inline-block;
padding-top: 100%;
vertical-align: top;
}
.small {
border-radius: 50%;
background: rgb(101, 112, 168);
width: 25%;
margin-left: 13%;
box-shadow: 20vmin 20vmin 40vmin;
}
.big {
background: linear-gradient(to top, rgb(195, 90, 131), rgb(195, 90, 131)) no-repeat 0 0;
width: 56%;/* according to the ratio choosen */
border-top-left-radius: 100%;
flex-shrink: 0;/* avoid flex to shrink it */
margin: auto 0 0 auto;
}
/* position piece of text via absolute */
p {
margin: 0;
position: absolute;
bottom: 1%;
right: 5%;
font-size: 15vmin;
white-space: nowrap;
color: white;
}
p span {/* this rules might need to be tune to specific font-family*/
width: 0.25em;
display: inline-block;
vertical-align: -0.1em;
font-size: 0.155em;
writing-mode: vertical-lr;
transform: scale(-1);/*=> writing-mode:sideways-lr; not avalaible everywhere*/
}
h1,
body:before {
top: 0;
color: rgb(101, 112, 168);
position: absolute;
width: 5em;
font-size: 2vmin;
margin: 12vmin 0 5vmin 5vmin;
}
body:before {
content: "2017";
top: auto;
bottom: 0;
font-weight: bold;
}
h1:before {
content: "HB";
color: rgb(195, 90, 131);
border-radius: 50%;
position: absolute;
bottom: 150%;
font-size: 2.5em;
width: 0.75em;
height: 0.75em;
line-height: 0.75em;
letter-spacing: -0.35em;
border: solid 1px;
text-indent: -0.35em;
overflow: hidden;
}
<h1>VISUAL EXPLORATION</h1>
<p><span>BACK TO</span>BASIS</p>
<div class="small"></div>
<div class="big"></div>
By using the same view port unit for both height and width, you can achieve a perfect circle. Then putting it within a container which is fixed to the height of the view port and hiding the rest of the overflow will allow you to remove any unnecessary scroll bars and still allow for content below the circle.
The below demo will show the circle proportionally correct, always 100% of the view port height while making sure it is always a perfect circle.
It will obviously look better in full screen.
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
background: #dedede;
}
.dark {
background: #777777;
}
.circle {
width: 200vh;
height: 200vh;
border-radius: 100%;
position: absolute;
right: -100vh;
background: pink;
}
<div class="container">
<div class="circle"></div>
</div>
<div class="container dark">
</div>