I'm having trouble making a div button responsive in a webpage. I have changed all pixel values to percentages and the problem still exists.
.wrapper {
display: block;
position: absolute;
left: 30%;
transform: translate(-50%, -50%);
}
.testing {
padding: 10% 10%;
text-align: center;
text-decoration: none;
color: #ffffff;
background-color: #009ac9;
border: 2px solid transparent;
font-size: 90%;
display: inline-block;
border-radius: 0.1em;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
}
.testing:hover {
background-color: #ffffff;
color: #009ac9;
border-color: #009ac9;
}
<div class="wrapper">
LOG IN
</div>
Another problem is, I have a fullscreen overlay menu and I'd like to disable this button when the overlay is present. As of now, the button is still clickable when the overlay is present. I'd like to disable it:
Image
Try this, I think this will be helpful.
.wrapper {
display: block;
position: absolute;
left: 0;
top: 0;
right:0;
bottom:0;
z-index:9;
}
.testing {
padding: 10% 10%;
text-align: center;
text-decoration: none;
color: #ffffff;
background-color: #009ac9;
border: 2px solid transparent;
font-size: 15px;
display: inline-block;
border-radius: 0.1em;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
position:relative;
left:50%;
top:50%;
width:20%;
min-width:50px;
transform: translate(-50%, -50%);
}
.testing:hover {
background-color: #ffffff;
color: #009ac9;
border-color: #009ac9;
}
<div class="wrapper">
LOG IN
</div>
And for the menu give z-index:999; to the .overlay in your Fullscreen Overlay menu style.I think it will work for you.
Try vh in place of percentages, Hope it will Work and use media query also in responsive screen.
https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery
Related
I would like a vertically aligned text to rotate in the horizontal direction when it is hovered. As an animation. Unfortunately I can't get any further at the moment. It is about the link on the right ("back"). Who knows how to do it? Thanks for advance!
.container {
display: block;
position: relative;
border: solid 3px #ccc;
padding: 40px 60px;
max-width: 400px;
margin: 100px auto 0;
}
#nav {
position: absolute;
top: 50px;
left: 20px;
}
#nav a {
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
font-weight: bold;
color: var(--text-color)
}
#nav a {
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
}
#nav a:hover {
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
color: red;
}
<div id="nav">
back
</div>
<div class="container">123</div>
The display property has to be changed to block for the transform to work. You don’t need to change the direction when the transform works. You can set the transform to initial on :hover and set transition for the animation.
.container {
display: block;
position: relative;
border: solid 3px #ccc;
padding: 40px 60px;
max-width: 400px;
margin: 100px auto 0;
}
#nav {
position: absolute;
top: 50px;
left: 20px;
}
#nav a {
display: block;
transform: rotate(-90deg);
transition: .3s;
font-weight: bold;
color: var(--text-color)
}
#nav a:hover {
transform: initial;
color: red;
}
<div id="nav">
back
</div>
<div class="container">123</div>
I'm writing a code for the chat of my stream, but i got some problems... i want to rotate only the border of the chat box without move the text or the background. how can i do this? i have already read some post but did not solve my problem. i want to do something like that chat.
i use the StreamLabs.
English is not my mother tongue; please excuse any errors on my part.
I'm a beginner at the front end and these issues are taking away my peace.
#import url(https://fonts.googleapis.com/css?family=Open+Sans:600,700);
body {
background: $background_color;
color: $text_color;
}
html, body {
height: 600%;
overflow: hidden;
transform: translate(0px, -10px);
}
#log {
font: 90;
font-family: 'Montserrat', sans-serif;
position: absolute;
bottom: 0;
left: 0;
width: 60%;
box-sizing: border-box;
overflow: hidden;
padding: 10px 16px;
padding-top: 100px;
}
#log>div {
margin-bottom: 45px;
background: rgba(255, 255, 255, 0.1);
padding: 5px 10px 10px;
animation: fadeInDown .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
-webkit-animation: fadeInDown .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
border-radius: 8px;
}
#log>div.deleted {
visibility: hidden;
}
.meta {
display: table;
line-height: em;
transform: translate(-20px,-30px);
border-radius: 0px 05px 05px 05px;
border: 10px solid #ffd600;
background: #ffd600;
margin-bottom: -22px;
font-weight: 800;
}
.message {
word-wrap: break-word;
display: block;
padding-left: 6px;
line-height: em;
color:white;]
}
.name {
color: Black;
font-size: em;
text-transform: initial;
font-weight: 600;
}
.colon {
display: none;
}
.badge {
float: left;
padding-left: 2px;
padding-right: 7px;
padding-top: 2px;
height: 0.8em;
}
#log .emote {
background-repeat: no-repeat;
background-position: center;
padding: 0.1em;
background-size: contain;
}
#log .emote img {
display: inline-block;
height: 1em;
opacity: 0;
vertical-align: top;
}
<!-- item will be appened to this layout -->
<div id="log" class="sl__chat__layout">
</div>
<!-- chat item -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<script type="text/template" id="chatlist_item">
<div data-from="{from}" data-id="{messageId}">
<span class="meta" style="color: {color}">
<span class="badges">
</span>
<span class="name">{from}</span>
</span>
<span class="message">
{message}
</span>
</div>
</script>
You can add a new element to your html and style it to look like that border, or style a pseudo element like ::before or ::after to give you that look.
.tilted-border {
margin: 10px;
background: purple;
border-radius: 10px;
width: 200px;
height: 100px;
position: relative;
padding: 0;
}
.tilted-border:after {
content: '';
display: block;
position: absolute;
top: -5px;
left: -5px;
width: 100%;
height: 100%;
border: 5px solid red;
border-radius: 10px;
transform: rotate( 5deg);
pointer-events: none;
}
<div class="tilted-border"></div>
What you're trying to do is not possible. You cannot move the border of a div independently of the div and its content.
What you'll need to do is create bother div within the first div. Set the container div to position: relative and then absolutely position the new inner div to the edges of the container like so: position: absolute; top: 0; bottom: 0; left: 0; right: 0;. Then you can animate the border of the inner div while the content still sits within the container div free of the transform.
How do I crop the parts of the "Today" red div that are not on the special div in order to make it look like a bookmark? Desired result is shown on the second image.
Thank you!
Actual image:
Desired image:
Html:
<div class="panel">
<div class="special">Special $120.00</div>
<div class="pr2">Today</div>
</div>
CSS
.special {
text-align: center;
margin-top: 20px;
}
.panel {
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
height: 70px;
}
.pr2 {
background-color: #d13a2f;
color: #ffffff;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
line-height: 35px;
text-align: center;
letter-spacing: 1px;
top: 5px;
right: -48px;
left: auto;
position: absolute;
padding-top: 20px;
width: 140px;
overflow: hidden;
display: block;
opacity: 0.6;
}
JSFiddle overlapping
Add overflow: hidden and position: relative to the .panel div:
.panel {
overflow: hidden;
position: relative;
}
Then adjust positioning values to your needs.
Updated fiddle
The nav buttons sit on top of the image title div. Both drop down on hover. When going to the next image, the nav buttons are at the correct location, but when you click on the previous, the whole nav screen shifts to the bottom right!
nav {
position: absolute;
width: 100%
height: 20px;
padding-bottom: 2px;
z-index: 1;
float: right;
margin-top: -20px;
transition: margin-top 200ms ease-in;
background: black;
opacity: 0.4;
right: 1px;
}
.title {
position: absolute;
width: 85%;
height: 20px;
padding-bottom: 2px;
margin-top: -25px;
transition: margin-top 200ms ease-in;
background: black;
color: white;
opacity: 0.6;
}
.title-text {
float: left;
padding-left: 5px;
}
.slides:hover .title {
margin-top: 0px;
}
Here is link to a fiddle.
I fixed this part but code itself is clumsy
anyway still here is example : jsfiddle
first of all you forgot ";" in .nav { between height and width
secondly dont use position: absolute and float it exclude each other
try to connect similiar classes like your buttons
.btn-prev,
.btn-next{
color: black;
background:white;
border: 2px solid white;
margin: 0px 5px 0px 0px;
cursor: pointer;
padding: 0px 5px 0px 5px;
display: inline-block;
}
Quick explain, I set text-align on .nav element so buttons would be set on right side inside .nav and .btn-* for display: inline-block; (default
display: block; so it would behave similiar like text.
I want to implement a CSS-only popup for an image, which should be displayed when the user hovers with the mouse over that image. After reading here, for example in this thread, I came up with this solution:
a.tooltip span {
width: 250px;
border: #000 1px solid;
background: #F8F8F8;
display: none;
padding: 10px;
z-index: 1000000;
opacity: 0;
transition: 750ms all;
}
a.tooltip:hover span {
display: inline;
position: absolute;
top: 10px;
left: 25px;
outline: none;
text-decoration: none;
font-size: 70%;
color: #000;
opacity: 1;
}
However, this solution does not make the popup fade-in, it simply pops up without any delay. Also, I want the popup to fade-out when when user moves away the mouse cursor again.
Any ideas what I am doing wrong, or what I should rather try instead?
PS: This is how I call the code:
<a href="#" class="tooltip">
<img src="questionmark.png" />
<span>Tooltip Text.</span>
</a>
You can't add a transition to an element with display:none; you must do it like this:
a.tooltip span {
position: absolute;
top: 10px;
left: 25px;
width: 250px;
border: #000 1px solid;
background: #F8F8F8;
padding: 10px;
z-index: 1000000;
display: inline;
opacity: 0;
transition: 750ms all;
}
a.tooltip:hover span {
outline: none;
text-decoration: none;
font-size: 70%;
color: #000;
opacity: 1;
}
Just use opacity, that's transition-able. Live example: https://jsfiddle.net/wbpbcyfz/1/