Im trying to create this <a> element that pins left of the screen. Its position is absolute but I cannot get it as in image:
HTML:
<a class="feedback__btn">Feedback</a>
CSS:
.feedback__btn {
position: absolute;
top: 11.5%;
left: 0;
background: green;
width: 150px;
height: 45px;
color: red;
z-index: 9;
display: inline-block;
transform: rotate(270deg);
font-size: 24px;
font-weight: 900;
text-align: center;
line-height: 45px;
border-radius: 0px 0px 4px 4px;
}
Two things that cause the tag from not pinning to the left: transform and the width/height. How to to get it pinned to either sides of screen (left in this case) with the same transformation?
If you move the center-point of the button, with transform:translateX(-50%) you will have a much easier way to figure out how much you need to move the button to place it correctly:
.feedback__btn {
position: fixed;
top: 11.5%;
left: 23px;
background: green;
width: 150px;
height: 46px;
color: red;
z-index: 9;
display: inline-block;
transform: translateX(-50%) rotate(270deg);
font-size: 24px;
font-weight: 900;
text-align: center;
line-height: 45px;
border-radius: 0px 0px 4px 4px;
}
I have added transform: translateX(-50%) rotate(270deg); and left: 23px; to your code and changed the heigh of the button to an even number, as that is easier to halve (half of 46 is 23, while half of 45 is 22.5, and you can't have half pixels).
I have also changed the position to fixed, so it follows the user down the site when scrolling.
Related
I have this
<input type="button">
and i want to make the button look like the code you get from this:
div {
position: relative;
background: #3F3C53;
width: 50px;
height: 50px;
color: white;
border-radius: 50%;
box-shadow: 0px 0px 15px 1px #4185BC;
margin: 50px;
}
div:after {
content: '•••';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
font-size: 15px;
letter-spacing: 4px;
margin-top: 2px;
}
How do I remove the default look of a box and change it to three vertical dots?
The given code styles a div by adding a pseudo element which has the three dots as content and it is able to style them (rotating) without the actual div being rotated.
It is not 'legal' CSS to have a pseudo element on an input element (though some browsers may allow it) so this snippet wraps the input in a div which has the styling and makes the actual input element have opacity 0 so it is still clickable but can't be seen.
Note the after pseudo element has been changed to a before pseudo element so that it does not overwrite the input element.
div {
position: absolute;
width: 50px;
height: 50px;
background: #3F3C53;
color: white;
border-radius: 50%;
box-shadow: 0px 0px 15px 1px #4185BC;
margin: 50px;
}
div::before {
content: '•••';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
font-size: 15px;
letter-spacing: 4px;
margin-top: 2px;
background: #3F3C53;
}
input {
width: 50px;
height: 50px;
border-radius: 50%;
opacity: 0;
}
<div><input type="button" onclick="alert('I have been clicked');"></div>
Here is a simple ribbon I want to position at the left upper corner of the screen:
.ribbon {
width: 200px;
background: #e43;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #ffffff;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
font-family: "Open Sans Regular";
font-size: 1.5em;
top: -10px;
left: -80px;
height: 80px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
position: fixed;
box-shadow: 0 3px 3px rgba(0,0,0,.3);
}
.ribbon.new {
background: #9ddc03;
}
<div class="ribbon new">NEW</div>
As you see the New word on the green ribbon is not totally visible because it is on the upper edge of the rectangle.
How can I position the ribbon's text on the lower edge of the rectangle so that we can see it correctly.
I used the below flex postioning on the ribbon class but it pushes the text to the right and not the center:
display: flex;
justify-content: flex-end;
align-items: flex-end;
You can update your code like below:
.ribbon {
background: #e43;
color: #ffffff;
font-size: 1.5em;
position: fixed;
top: 0;
left: 0;
transform: translateX(-50%) rotate(-45deg);
transform-origin:top;
padding:40px 100px 0; /* adjust the 40px to control the height (the 100px need to be a big value) */
box-shadow: 0 3px 3px rgba(0,0,0,.3);
}
.ribbon.new {
background: #9ddc03;
}
<div class="ribbon new">NEW</div>
I am having some issues with absolute objects on a website. Z-index essentially won't work correctly. I may be being a little dumb?
Here is the website: http://www.mascots.ds-demo.co.uk/
The blue and yellow characters need to be behind the hero cta buttons 'learn more' and 'get a quote' however i cant get them to work with z-index.
CSS on characters:
.character-blue-float {
position: absolute;
float: right;
top: 7%;
left: -20%;
z-index: 1000;
-ms-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
transform: rotate(7deg);
}
.character-blue-float img {
width: auto;
max-width: 800px;
height: auto;
}
CSS on Buttons:
.home-hero-cta {
margin-top: 30px;
z-index: 2000;
}
.btn-outer-lrg {
padding: 10px 20px;
color: #08788c;
border: 2px solid #08788c;
border-radius: 5px;
font-size: 22px;
background-color: transparent;
margin-right: 10px;
font-family: 'Fredoka One', cursive;
}
apply below css to hero-home and check
.hero-home {
z-index: 1001;
position: relative;
}
it should work
My problem is that I cannot horizontally center a triangle pointer.
Well, I can center the pointer for some window sizes, but when I shrink or extend the window it places it in the wrong place again.
What am I missing?
body {
background: #333333;
}
.container {
width: 98%;
height: 80px;
line-height: 80px;
position: relative;
top: 20px;
min-width: 250px;
margin-top: 50px;
}
.container-decor {
border: 4px solid #C2E1F5;
color: #fff;
font-family: times;
font-size: 1.1em;
background: #88B7D5;
text-align: justify;
}
.container:before {
top: -33px;
left: 48%;
transform: rotate(45deg);
position: absolute;
border: solid #C2E1F5;
border-width: 4px 0 0 4px;
background: #88B7D5;
content: '';
width: 56px;
height: 56px;
}
<div class="container container-decor">great distance</div>
You have your arrow centered with left:48%. This positions the arrow near the center of the container based on the arrow element's left edge.
In other words, assume you used left:50% (which is the correct way to go), this doesn't center the arrow element in the container. It actually centers the left edge of the element in the container.
In the image below a marker is centered on the page using text-align:center.
For comparison, see your arrow centered with left:50%.
The element is positioned center-right. This misalignment becomes more noticeable as the window gets smaller.
As a result, it is common to see centered, absolutely positioned elements use the transform property:
.triangle {
position: absolute;
left: 50%;
transform: translate(-50%,0);
}
The transform rule tells the triangle to shift itself back by 50% of its width. This makes it perfectly centered on the line. Now it emulates text-align:center.
In translate(-50%,0), the first value targets the x-axis (horizontal), the other applies to the y-axis. An equivalent rule would be transform:translateX(-50%) (there's also transform:translateY()).
As an aside, here's how to center an element both horizontally and
vertically using this method:
.triangle {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Note: If you were using right: 50% or bottom: 50%, the respective translate values would be 50% (not negative).
In this particular question, however, an issue arises because transform:rotate(45deg) is also in the declaration block. Adding a second transform means the first one is ignored (per the cascade).
So, as a solution, try this:
.container::before {
left: 50%;
transform: translate(-50%,0) rotate(45deg);
}
By chaining functions together, multiple functions can be applied.
Just note that order matters. If translate and rotate were reversed, the triangle would first rotate 45 degrees and then shift -50% along the rotated axis, breaking the layout. So make sure that translate goes first. (Thanks #Oriol for pointing this out in the comments.)
Here's the full code:
body {
background: #333333;
}
.container {
width: 98%;
height: 80px;
line-height: 80px;
position: relative;
top: 20px;
min-width: 250px;
margin-top: 50px;
}
.container-decor {
border: 4px solid #C2E1F5;
color: #fff;
font-family: times;
font-size: 1.1em;
background: #88B7D5;
text-align: justify;
}
.container::before {
top: -33px;
left: 50%;
transform: translate(-50%,0) rotate(45deg);
position: absolute;
border: solid #C2E1F5;
border-width: 4px 0 0 4px;
background: #88B7D5;
content: '';
width: 56px;
height: 56px;
}
<div class="container container-decor">great distance</div>
jsFiddle
You could potentially use the new CSS3 calc() function which allows you to do arithmetic to figure out the center point.
To get your center point, the calculation will have to be:
50% - (56px / 2)
So this ends up being
50% - 28px
Putting this into the calc() function should then figure it out within the browser and position it perfectly in the center.
body {
background: #333333;
}
.container {
width: 98%;
height: 80px;
line-height: 80px;
position: relative;
top: 20px;
min-width: 250px;
margin-top: 50px;
}
.container-decor {
border: 4px solid #C2E1F5;
color: #fff;
font-family: times;
font-size: 1.1em;
background: #88B7D5;
text-align: justify;
}
.container:before {
top: -33px;
left: calc(50% - 28px);
transform: rotate(45deg);
position: absolute;
border: solid #C2E1F5;
border-width: 4px 0 0 4px;
background: #88B7D5;
content: '';
width: 56px;
height: 56px;
}
<div class="container container-decor">great distance</div>
i'm working on this element http://zag-test.nowcommu.myhostpoint.ch/
what i need is to "enalrge" the entire element in the same position, but via CSS i can on enlarge the central button (CLICK button).
How can i solve?
CSS
.cn-button {
position: absolute;
top: 100%;
left: 50%;
z-index: 11;
margin-top: -2.25em;
margin-left: -3.78em;
padding-top: 0em;
width: 7.5em;
height: 7.5em;
border: none;
border-radius: 50%;
background: none;
background-color: #000;
color: #f9d70a;
text-align: center;
font-weight: 700;
font-size: 1.3em;
text-transform: uppercase;
cursor: pointer;
-webkit-backface-visibility: hidden;
You can use the transform attribute with scale to make everything bigger:
#cn-wrapper {
transform: scale(1.4) !important;
}
This is for the outer menu options, and the !important forces it to be used