I'm learning from a project which uses cards with border-radius 50px. However, on wider screen, the border is not working. It's a quite simple code, bud I don't understand why this is happening
Can you help me?
<div class="panel panel1" style="background-image: url('https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Zm9yZXN0fGVufDB8fDB8fA%3D%3D&w=1000&q=80')">
<h3>Explore the world</h3>
</div>
body {
font-family: 'Muli', sans-serif;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
}
.container {
display: flex;
width: 90vw;
overflow: hidden;
}
.panel {
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: white;
cursor: pointer;
flex: 0.2;
margin: 15px;
position: relative;
transition: flex 0.7s ease-in;
overflow: hidden;
}
.panel h3 {
font-size: 24px;
position: absolute;
bottom: 60px;
left: 200px;
margin: 0;
opacity: 0;
}
.panel.active {
flex: 2;
overflow: hidden;
}
Border radius not working
looking at the print screen it looks like the border radius is working, but the div is being cut, maybe you can solve this by adding a width to the panel
Related
When I hover my mouse on the background of the image, the 3D effect triggers, but when I move over the girl image area, it doesn't trigger anymore. The transparent image is overlaying the background. How do I make it triggers when the mouse is over the girl image?
See what I did on JSFIDDLE
HTML -
<div class="test-imgplace">
<img src="https://christianluneborg.com/imgs/test-woman.png" class="imgtest">
<div class="card-hover">
<div class="card">
<div class="card-content">
<div class="image" style="background-image: url(https://christianluneborg.com/imgs/test-woman-bg.png);"></div>
</div>
</div>
</div>
</div>
CSS -
.card .image{
height: 275px;
width: 183px;
background-size: cover;
background-position: center center;
}
.imgtest {
position: absolute;
z-index: 1;
text-align: center;
top: 0;
left: 100px;
border: solid 1px;
}
.test-imgplace {
margin: 0 auto;
position: relative;
overflow: hidden;
}
.card .text{
height: 20%;
margin: 0;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-size: 50px;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
.card{
width: 183px;
height: 275px;
margin: auto auto;
background: #383030;
border-radius: 5px;
overflow: hidden;
text-align: center;
}
.card-content{
transform-style: preserve-3d;
}
body{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.hover-in{
transition: .3s ease-out;
}
.hover-out{
transition: .3s ease-in;
}
.card-hover{
margin:0;
}
When the mouse hovers over the semi-transparent image, it causes mouse events to go there instead of the script that is applying the 3D effect.
This is easy to fix - just add pointer-events: none; to .imgtest. JSFiddle of the fix
I have tried to build a login form on a HTML page (Angular) that has a full size, centered background image and the form is placed in a div with blurred background, that is centered in the x- and y-axis of the browser window.
That is how far I came: https://codepen.io/surfermicha/pen/ZwpxBa
<div class="login-background-door2">
<div class="aero-background centered">
<h3>Here will be a login form later</h3>
</div>
</div>
Unfortunately i have some issues with that:
The centered box isn't exactly in the center
It's not responsive. The div is to small at small devices. I want 10px margin left and right, but a max-width 500px on bigger screens.
Could anyone help edit the codepen for a working responsive solution
You can set media queries by your needs, like I set into 567px because after 567px view of your center block, don't look nice so I set into 567px.
body, html {
font-family: "roboto", monospace;
color: #EEE;
padding: 0;
width: 100%;
margin: 0;
height: 100%;
overflow-x: hidden;
}
.aero-background::before {
content: '';
background: url("http://placekitten.com/2400/2000") center no-repeat;
filter: blur(6px);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
pointer-events: none;
}
.aero-background {
border-radius: 5px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
color: white;
align-items: center;
justify-content: center;
text-shadow: 0 0 10px black;
}
.centered {
max-width: 500px;
min-height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.login-background-door2 {
background: url("http://placekitten.com/2400/2000") center no-repeat;
height: 100%;
width: 100%;
overflow: hidden;
}
#media screen and (max-width: 567px) {
.centered {
width: 250px;
}
}
<div class="login-background-door2">
<div class="aero-background centered">
<h3>Here will be a login form later</h3>
</div>
</div>
https://codepen.io/anon/pen/MLjXgW
Centered with flex, no media queries
body, html {
font-family: "roboto", monospace;
color: #EEE;
padding: 0;
width: 100vw;
margin: 0;
height: 100vh;
overflow-x: hidden;
}
$login-background-image: "http://placekitten.com/2400/2000";
.aero-background::before{
content: '';
background: url($login-background-image) center no-repeat;
filter: blur(6px);
position: absolute;
left:0; top:0; right:0; bottom:0;
z-index: -1;
pointer-events: none;
}
.aero-background {
border-radius:5px;
box-shadow: 0 0 15px rgba(black, .4);
border:1px solid rgba(white,.1);
color: white;
align-items: center;
justify-content: center;
text-shadow:0 0 10px black;
max-width:500px;
min-height: 300px;
margin-left: 10px;
margin-right: 10px;
display: flex;
text-align: center;
padding: 10px;
}
.login-background-door2 {
background: url($login-background-image) center no-repeat;
height: 100%;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
<div class="login-background-door2">
<div class="aero-background">
<h3>Here will be a login form later</h3>
</div>
</div>
My first time answering so I apologize if missed something
I'm trying to create a UI element that remains centered and the image scales to the size of the container. I have additional caption and text over the image. But the image seems to scale proportionally over only some of the range when I adjust the height or width. Preferably using only CSS and HTML. The top-level div does need to be absolutely positioned. I'm indifferent to the use of flexbox. That was just one tact I've tried.
Here it is as a codepen.
And the full code is below, though it is easier to play with it in the codepen as you can adjust the results pane easily. (open up the console so you can also adjust height.)
.block {
/* this needs to remain an absolute positioned block with size and location expressed in percent */
position: absolute;
height: 80%;
width: 80%;
top: 10%;
left: 10%;
background-color: #777777;
/* Don't care if using flexbox */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
text-align: center;
}
.imagecontain {
position: relative;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}
.image {
max-height: inherit;
max-width: calc(100% - 8px);
padding: 0 !important;
border: 4px solid #123456 !important;
}
.button {
border-color: #b2b2b2;
background-color: #f8f8f8;
color: #444;
position: relative;
display: inline-block;
margin: 0;
padding: 0 12px;
min-width: 52px;
min-height: 47px;
border-width: 1px;
border-style: solid;
border-radius: 2px;
vertical-align: top;
text-align: center;
text-overflow: ellipsis;
font-size: 16px;
line-height: 42px;
cursor: pointer;
box-shadow: 0px 0px 3px #888888 !important;
}
.overimage {
vertical-align: bottom;
position: absolute;
bottom: 10%;
left: 50%;
max-width: 80%;
min-width: 60%;
padding: 5px;
opacity: .7;
transform: translateX(-50%);
background-color: black;
color: white;
border-radius: 10px;
z-index: 2;
}
.name {
text-align: bottom;
background-color: white;
padding: 5px;
border: 1px solid black;
}
<div class="block">
<div class="imagecontain">
<div class="overimage">this is a test of the emergency broadcast</div>
<img class="button image" src="https://scontent-dfw1-1.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/582520_10151526852434301_1015227082_n.jpg?oh=6537667094d5a160b8fbab0728dc2f5a&oe=57971FCB">
</div>
<div class="name">Mountains</div>
</div>
Use the background-size properties in CSS. Change your image from an tag to the background of the div. The specific property you're looking for is probably
background-size: cover;
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Add:
.imagecontain {
max-width: 100%;
width: 100%
}
Remove:
.block {
height: 80%;
}
I've been working on an Angular plugin that uses a template. My goal is to add more padding-top to the section "loader-wrap", but when I do this, the second div called "message-wrap" is modified and moved as well.
I need add padding-top: 100px to 'loader-wrap' without moving down 'message-wrap' along with it. How do I fix this?
Basic Structure HTML
<div id="page-wrap">
<section id="loader-wrap"></section>
<section id="message-wrap"></section>
</div>
CSS
gp-splash-loader #page-wrap {
z-index: 999;
position: fixed;
background: #FFFFFF;
width: 100%;
height: 80%;
top: 10%;
margin: 0 auto;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
transition: opacity .5s;
-webkit-backface-visibility: hidden;
}
#media ( max-height: 735px) {
gp-splash-loader #page-wrap.opened{
height: 100%;
top: 0;
};
}
gp-splash-loader #page-wrap.closed {
opacity: 0;
}
gp-splash-loader #page-wrap.opened {
opacity: 1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
}
gp-splash-loader #loader-wrap {
width: 30%;
height: 70%;
min-width: 300px;
max-width: 600px;
margin: 10px auto;
padding-top: 50px;
}
gp-splash-loader #message-wrap {
min-width: 1px;
margin: 0 auto;
height: 30%;
min-height: 30%;
}
gp-splash-loader #header-wrap {
display: inline-block;
}
check in codepen: http://codepen.io/gpincheiraa/pen/obdXEx
Here's the deal. You can't move that loader down with padding, otherwise it will affect the message. you need a different solution. try the below html/css.
Basically I set it up so the loader and the message are in a div that will be centered. then inside of that centered div, you can do whatever you want. But the loader and message will be in the middle
if you want only the loader to be centered, then you can take the message out of the 'loader-message-box' div, and apply different styles to it. I'll work up a another fiddle for that solution
https://jsfiddle.net/ahmadabdul3/huf5zjkv/ - both message and loader are centered
https://jsfiddle.net/ahmadabdul3/huf5zjkv/1/ - this one will keep the message on the bottom
code:
html
<div class='loader-message-box'>
<div class='loader-message'>
<div class='loader'>
</div>
<div class='message'>
Message
</div>
</div>
<div class='vertical-mid-hack'>
</div>
</div>
css
body, html {
height: 100%;
margin: 0;
}
.loader-message-box {
width: 100%;
height: 100%;
text-align: center;
}
.loader-message {
display: inline-block;
vertical-align: middle;
margin: 0 -2px;
}
.vertical-mid-hack {
display: inline-block;
vertical-align: middle;
margin: 0 -2px;
height: 100%;
}
.loader {
width: 100px;
height: 100px;
background-color: teal;
border-radius: 100px;
margin: 0 auto;
margin-bottom: 20px;
}
.message {
background-color: white;
border-radius: 3px;
font-family: arial;
padding: 20px 0;
margin: 0 auto;
margin-top: 20px:
}
I removed any instance of gp-splash-loader from CSS. I don't know ng but I do know gp-splash-loader is not a valid selector. Other than that, the following CSS is the important part:
CSS:
body {
margin: 0;
padding: 0;
background: slateblue;
text-align: center;
top: 0;
position: relative;
}
#loader-wrap {
width: 30%;
height: 70%;
min-width: 300px;
max-width: 600px;
margin: 10px auto;
padding-top: 100px;
position: relative;
z-index: 10;
}
#message-wrap {
min-width: 1px;
margin: 0 auto;
height: 30%;
min-height: 30%;
position: relative;
z-index: 11;
}
Added 50px padding-top
Positioned both relative (and body as well)
Made sure that one never touches the other by using different z-index
http://codepen.io/zer00ne/full/qbYMMQ/
BTW, if you want to adjust either section up or down, add top and a negative value if you want the section to go up and vice versa. ex.
#message-wrap {
min-width: 1px;
margin: 0 auto;
height: 30%;
min-height: 30%;
position: relative;
z-index: 11;
top: -100px;
}
That should place #message-wrap 100px higher.
I would like to center vertically and horizontally a div inside another div.
I have tested this code in various browser: it works as expected in every browser except Safari, in which the div inside is centered horizontally and not vertically.
How I can I solve this?
.newsletterHome {
width: 495px;
height: 200px;
display: block;
position: relative;
padding-bottom: 20px;
border-style: solid;
border-width: 3px;
border-color: #000;
margin-bottom: 40px;
}
.newsletterHome div {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size: 1.45em;
}
.newsletterHome a {
-webkit-font-smoothing: subpixel-antialiased;
-webkit-appearance: none;
transition: .3s;
-webkit-transition: .3s;
-moz-transition: .3s;
}
<div class="newsletterHome">
<a target="_blank" href="#"><div>SIGN UP FOR OUR NEWSLETTER!</div></a>
</div>
I changed your css:
.newsletterHome div {
display: inline-flex;
font-size: 1.45em;
position: absolute;
top: 90px;
left: 50px;
white-space: nowrap;
text-decoration: underline;
}
This is a kind of manual way of solving the problem, but it works. The "flex" is the problem in my opinion. They don't work the same way in all browsers.
I was able to solve the problem:
.newsletterHome div {
width: 100%;
height: 30%;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
font-size: 1.45em;
}