I'm facing a small design problem with CSS Adjustments. I skewed the backgrounds of all the sections and elements but near the footer, I want to join the article and footer it is not adjusting according to the design can any one please help how to fix it. Here is my plunker link.
<https://plnkr.co/edit/iCgonAiCoBUfSaAF851P?p=preview>
Change CSS as the following
section {
background: #191919;
color: white;
}
section, article {
transform: skew(0deg, -10deg);
padding: 20px;
}
section>div, article >div{
transform: skew(0deg, 10deg);
}
article {
background: white;
color: black;
}
Plunker Link
As suggested in comments, add background color to your body and add some margin-top to the footer, and use the following CSS:
body, html {
height: 100%;
margin: 0;
background:#191919;
}
.hero-image {
background-color: #6c7cd0;
padding: 200px 0;
transform: skew(0deg, -10deg);
margin-top: -150px
}
.hero-text {
transform: skew(0deg, 10deg);
text-align: center;
}
.wrapper {
transform: skew(0deg, -10deg);
background: #191919;
color: white;
}
section, article {
transform: skew(0deg, 10deg);
padding: 20px;
}
.wrapper::after{
transform: skew(0deg, -10deg);
}
div > h1 {
margin-top: 50px;
}
footer {
text-align: center;
background: #6c7cd0;
color: white;
margin-top:50px;
padding: 20px;
}
Note: Your layout needs considerable work in larger viewports specific to the skewing problem.
Hope this helps.
Related
I'm looking to allow visitors to my website the ability to rotate the webpage upside (180ยบ) with the click of a button.
I know I can go into the CSS and add the following code to completely flip it:
body{
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
But I want to be able to give the user the ability to essentially turn this on/off. Is there a way to do this?
BONUS POINTS if the rotation can be CSS animated to do a smooth transition. But not required.
You can assign an event to a button or link, and on click, the page will flip.
const button = document.querySelector('.button');
const changeClass = (e) => {
const body = document.querySelector('.main');
body.classList.toggle('rotate');
};
button.addEventListener('click', (e) => {
changeClass(e);
});
body {
margin: 0;
}
.main {
background: url(https://japan-forward.com/wp-content/uploads/2022/02/Mt-Fuji-Eruption-Volcano-006-scaled.jpg);
background-size: cover;
height: 100vh;
}
.rotate {
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
.container {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
width: 100vw;
}
.text {
color: #ffffff;
margin-bottom: 5px;
}
.button {
width: 140px;
height: 100px;
border-radius: 20px;
border-width: 0;
font-family: 'Roboto', sans-serif;
font-size: 20px;
background-size: 100%;
background-color: blue;
color: #ffffff;
}
.footer {
background: #ff0000;
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
text-align: center;
font-size: 20px;
}
<div class="main">
<div class="container">
<button class="button">Click to rotate 180</button>
<footer class="footer">Footer</footer>
</div>
</div>
So basically i want my Social Bar to be on the Right side of the Screen yet i just can't figure out why it wont move :(
Tried to mess with the Icon Bar and shiz but im still learning so i don't really know what to do
HTML
.icon-bar {
position: fixed;
top: -100%;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
}
.icon-bar a {
display: block;
position: static;
text-align: left;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bar a:hover {
background-color: rgb(196, 44, 44);
}
.twitter {
background: #55ACEE;
color: white;
}
.instagram {
background: #125688;
color: white;
}
.linkedin {
background: #007bb5;
color: white;
}
CSS
<!-- Social Buttons -->
<div class="icon-bar">
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-linkedin"></i>
Change this code of css:
.icon-bar {
position: absolute;
right: 0;
}
.icon-bar {
position: fixed;
top: -100%;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
}
The top value of -100% in icon-bar selector is causing issue in your code. By setting the value of -100% the bar is being pushed up in the viewport, to a point where it becomes invisible.
To move it to right, when you use position:fixed you should use right:0.
(In the below code I use the name of social media)
To layout your a tags, it's better to use display:flex, flex layout is the best way to layout your items on the page.
.icon-bar {
position: fixed;
/* top: -100%; */
right:0;
/*-webkit-transform: translateY(50%); //I comment this code to show element on result box.
-ms-transform: translateY(50%);
transform: translateY(50%);*/
}
.icon-bar a {
/* display: block;
position: static; */
display:flex;
text-align: left;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bar a:hover {
background-color: rgb(196, 44, 44);
}
.twitter {
background: #55ACEE;
color: white;
}
.instagram {
background: #125688;
color: white;
}
.linkedin {
background: #007bb5;
color: white;
}
<div class="icon-bar">
twitter
instagram
linkedin
<div>
To learn more about position these links will help you:
css-tricks.com
developer.mozilla.org
About flex layout, you can read:
css-tricks.com
developer.mozilla.org
I am working on a website. It has a page to show in which I show several Images . I have come across a problem that the pictures that I have taken with my dslr at vertical angle () are rotating automatically when opened in my mobile phone.
This is my html:
<div class="product-img container" style="width: 95% !important; margin-bottom:10px;">
<img src="{{product.disimage.url}}" alt=""> </div>
and this is the css that is linked to class product-img:
.latest-product-area .single-product .product-img {
margin-bottom: 30px;
position: relative;
}
.latest-product-area .single-product .product-img img {
width: 100%;
}
.latest-product-area .single-product .product-img .new-product {
position: absolute;
top: 25px;
left: 23px;
}
.latest-product-area .single-product .product-img .new-product span {
background: #ff003c;
padding: 3px 16px;
border-radius: 30px;
color: #fff;
}
.single-product .product-img {
position: relative;
overflow: hidden;
}
.single-product .product-img .p_icon {
width: 90%;
padding: 7px 30px;
position: absolute;
bottom: -100px;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
background: rgba(37, 119, 253, 0.4);
transition: all 400ms ease;
}
.single-product .product-img .p_icon a {
display: inline-block;
height: 36px;
line-height: 40px;
width: 36px;
text-align: center;
background: #fff;
border-radius: 30px;
color: #415094;
margin-right: 25px;
}
.single-product .product-img .p_icon a:last-child {
margin-right: 0px;
}
.single-product .product-img .p_icon a:hover {
color: #fff;
background: #2577fd;
}
.single-product:hover .product-img .p_icon {
bottom: 0px;
}
.new_product .product-img {
padding: 90px 0px;
}
When I open it on desktop there is no problem. But when I tested in several devices in two devices the vertical images auto rotated while in one it was normal. I have attached two pics to show the problem. Please help me fix it.Also I am working this on a django website so the images are being uploaded in the admin(database) then shown here.
The image above was taken horizontally (landscape) and is showed correctly. While the Image below(names UTt) WAS TAKEN vertically (potrait) but it is autorotating which I dont want it to be.
Maybe this can help you? https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation
Browser seems to read the Metadata of your Image and choose appropriate orientation automagically. Using this CSS you should be able to force it the way you want, though I'm not so certain about Browser Cross-compatibility with this. You might have to check on that.
A note: The original post were deleted with its user, and as I found it could be useful, I reposted it.
The rectangle should be rotated -90deg and be centered vertical in the left side of the screen. As you can see in the picture below.
If possible, only HTML and CSS should be used.
The problem is, to first rotate the element, which makes it more difficult to center it.
Stack snippet
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 16px;
font-family: Arial, sans-serif;
}
* {
box-sizing: border-box;
}
body>div {
position: fixed;
top: 50%;
left: 0;
background-color: #FF0000;
color: white;
font-weight: bold;
padding: 10px;
-webkit-transform: rotate(-90.0deg);
-moz-transform: rotate(-90.0deg);
-ms-transform: rotate(-90.0deg);
-o-transform: rotate(-90.0deg);
transform: rotate(-90.0deg);
}
<div>Lorem Ipsum</div>
To better control the rotation, and more easily both left align and center it vertically, use both the transform-origin and transform.
First make its left/top corner as the center of the rotation by adding transform-origin: left top; to the div.
Second, by combine rotate and translate, move it half of its own width to the left (translateX(-50%)), and then rotate it 90 degrees counterclockwise rotate(-90.0deg).
Note 1; When using more than one <transform-function> value, they execute from right to left, which in below sample mean it starts with translateX.
Note 2; I temporary removed the prefixed properties, so you need to add them back.
Stack snippet
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 16px;
font-family: Arial, sans-serif;
background-color: #ccc;
}
* {
box-sizing: border-box;
}
body>div {
position: fixed;
top: 50%;
left: 0;
background-color: #FF0000;
color: white;
font-weight: bold;
padding: 10px;
transform-origin: left top;
transform: rotate(-90.0deg) translateX(-50%);
}
<div>Lorem Ipsum</div>
Update after a comment.
Here is 4 fiddles, showing 4 steps, that hopefully make it more clear how this works:
Step 1 - Step 2 - Step 3 - Step 4
Here is an animation, showing how it moves, and hopefully make it more clear how this works:
html, body {
margin: 0;
font-size: 16px;
font-family: Arial, sans-serif;
}
.faked-body div {
position: absolute;
top: 50%;
left: 0;
background-color: #FF0000;
color: white;
font-weight: bold;
padding: 10px;
transform-origin: left top; /* the rotation center is moved to black circle */
transform: rotate(0)
translateX(0);
animation: the-div 3s 1s forwards;
}
#keyframes the-div {
0% { transform: rotate(0)
translateX(0);
}
50% { transform: rotate(0)
translateX(-50%); /* move to left */
}
100% { transform: rotate(-90deg) /* rotate 90 degree */
translateX(-50%);
}
}
/* styling/info for this demo */
.faked-body div::before {
content: '';
position: absolute;
top: -10px;
left: 0;
transform: translateX(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background-color: black;
animation: the-spot 1.5s 1s forwards;
}
.faked-body {
position: relative;
margin: 10px 60px;
width: 440px;
height: 200px;
background-color: #ccc;
font-size: 14px;
}
.faked-body::before {
content: 'The gray area represents the body so we can see how the "Lorem Ipsum" element moves';
color: #666;
}
.faked-body::after {
content: 'The black spot show where the rotation center is';
color: #222;
position: absolute;
bottom: 0; left: 0;
}
#keyframes the-spot {
0% { left: 0;
}
100% { left: 50%;
}
}
<div class="faked-body">
<div>Lorem Ipsum</div>
</div>
We can use the 'text-orientation' property instead of 'rotate'.
I tried the below code and it worked for me.
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 16px;
font-family: Arial, sans-serif;
display: flex;
align-items: center;
align-content: center;
}
body > div {
background-color: #ff0000;
color: white;
font-weight: bold;
padding: 10px;
width: auto;
height: auto;
writing-mode: vertical-rl;
text-orientation: upright;
}
Create another parent div to 'Lorem Ipsum' and apply "display: flex;
align-items: center;
align-content: center;" properties to the parent div to avoid giving flex to 'body' tag.
Hope it helps.
Understood. Please try the below css, it may solve your issue.
body, html {
height: 100%;
display: grid;
font-size: 16px;
font-family: Arial, sans-serif;
}
div {
margin: auto auto auto 10;
background-color: #FF0000;
-webkit-transform: rotate(-90.0deg);
-moz-transform: rotate(-90.0deg);
-ms-transform: rotate(-90.0deg);
-o-transform: rotate(-90.0deg);
transform: rotate(-90.0deg);
padding: 10px;
}
FYI: I tested this on chrome and safari and working.
When browser get resized absolutely positioned after pseudo-element overflows and causes problems. I am looking for a way to fix this. Just resize the browser until you reach header text.
Here is a demo of the problem: http://codepen.io/anon/pen/grKNoJ
.section {
font-family: 'Quantico';
font-weight: bold;
font-size: 36px;
color: white;
border-top: solid 1px black;
text-transform: uppercase;
margin-bottom: 28px;
}
.section-title {
background-color: black;
display: inline-block;
padding: 8px 18px;
position: relative;
}
.section-title:after {
content: " ";
position: absolute;
display: block;
right: 0;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: #000;
transform-origin: bottom left;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}
You can fix it by adding text-overflow: ellipsis; and white-space: nowrap; to .section-title.
You could also set a max-width to that element, and set it to different values according to your media queries, and have it serve your needs on different devices.
Here is the updated result: http://codepen.io/johnnykb/pen/mPKZLg