Hey I don't know how to make perpendicularly text in Html i tried this:
<head>
<style>
body {
transform: rotate(90deg);
transform-origin: left top 0;
background-color: red
}
</style>
</head>
<body>Hello World!</body>
But it just made red background color.
Can you help me ?
I think you DID achieve it, but pushed it off-canvas...
Update: After comment I am also demonstrating a -90 degree transform. Note that the superfluous positioning rules (especially "bottom") come about from having two paragraphs. But the point is that when you rotate something it can end up on canvas without some extra positioning.
body {
background-color: red
}
p.ninety {
transform: rotate(90deg);
transform-origin: left top 0;
position: relative;
left: 20px;
}
p.minusninety {
transform: rotate(-90deg);
transform-origin: left top 0;
position: relative;
left: 40px;
bottom: -78px;
}
<body>
<p class="ninety">Hello World!</p>
<p class="minusninety">I'm getting dizzy!</p>
</body>
Mate, don't do that affecting to body directly.
Make a class, for example 'vertical-container' and then apply the style there.
<head>
<style>
body .vertical-container {
transform: rotate(90deg);
transform-origin: left top 0;
background-color: red
}
</style>
</head>
<body>
<div class="vertical-container" > Hello World! </div>
</body>
Edit: Remember then that it element will have some inherited properties from the parent (body in this case) since it's relative positioned for default. So you could need 'play' with sizes ultil you have what you really want. For example giving a body height:100%, width:100% if what you want is full screen content.
Related
image description here
I need to make a div like this.
I made it in clip-path, but the problem is that I have to insert the content into div (some text) that came out of div barrier, if anyone has a solution how to get a diagonal border (top, left), I would be grateful
you can use skew :
.diagonal-border {
width: 200px;
height: 200px;
transform: skew(-20deg);
background-color: lightgray;
overflow: hidden;
}
.diagonal-border p {
transform: skew(20deg);
padding: 10px;
}
<div class="diagonal-border">
<p>Content goes here</p>
</div>
an idea for the diagonal border ,
<html>
<head>
<style>
div{
border-bottom: 1px solid red;
width: 50%;
transform: rotate(45deg);
transform-origin: top left;
}
</style>
</head>
<body>
<h2>A simple diagonal Line:</h2>
<div></div>
</body>
</html>
you can use this example to impliment the diagonal borders
and, I can share with you some links that used to use when I started the journey in frontend development you can use and it will save some of your time
https://fonts.google.com/icons
https://fonts.google.com/ fonts
https://htmlcheatsheet.com/css/
https://htmlcheatsheet.com/
https://mixkit.co/ free stack vedio ncc
https://www.freeformatter.com/html-formatter.html code formatter - the best tools for a good code making
-JD
I'm making a website in wordpress.com and I'm trying to figure out how to control where an image is placed? Currently I can only place an image below or above another and it looks really messy. Is there a way to control the coordinates using html or CSS? Preferably html because I want different positions for different images.
Here is the code of my images so far:
.container {
position: relative;
width: 400px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.projeto01 {
color: white;
font-size: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
<div class="grid-portefolio">
<div class="container">
<img src="https://insert1australia.files.wordpress.com/2021/04/real-sinister-minister-14-250x250-1-1.png" class="image" alt="Albert Lee Banks Electorate"/><div class="overlay"><div class="projeto01">Albert Lee<br>Banks Electorate</div></div>
</div>
Also note that I'm a beginner at programming. The code above is a mix of templates I found online and some help from a friend.
You can use margin property of css, or I tried it myself, and there might be some other css code overlapping yours since when I changed the width of my three images, they appeared on one line
Edit: #MrMcGoofy, the example code is:
<!DOCTYPE html>
<html style="background: black;" lang="en-US"><head>
<title>TITLE</title>
<style>
#one{
/*Add the css you want, but this one wouldn't need margin*/
}
#two{
margin-bottom: /*Play around with the value until you get the desired result , also try to change the margin-bottom to margin-top/left/right*/;
}
#three{
margin-bottom: /*Play around with the value until you get the desired result, also try to change the margin-bottom to margin-top/left/right*/;
}
</style>
</head>
<body>
<img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg" alt="1.jpg" width="40%" id="one">
<img src="https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706__340.jpg" alt="2.jpg" width="40%" id="two">
<img src="https://cdn.pixabay.com/photo/2015/10/12/14/59/milky-way-984050__340.jpg" alt="3.jpg" width="40%" id="three">
</body>
</html>
try to use in your image tag position:absolute; and then use top and left;
for example give top:50px; and left:100px; see what happens, play around with this...good luck
and you can check this to see where i am coming from:
https://css-tricks.com/absolute-positioning-inside-relative-positioning/
About size it's all about width and height properties, and about position. I think it depends on your website layout, but you can also use top, right, left, bottom.
Hope I helped you enough.
I am trying to style a page with a righthand side bar that has a menu. I am using div tags. What I get looks close, but it is not obvious to me how to create the menu div in the right bar that should contain the rotated menu item divs. The image illustrates what I mean. The right bar is transparent such that the main page content below is visible. I want to animate the bar div with Javascript but accomplished that already.
Currently, I have in my css
#menu_list {
top: 0;
left: 0;
padding: 0 0;
text-align: center;
transform-origin: center top;
transform: translateX(-50%) translateY(300%) rotate(-90deg);
}
#menu_list p {
color: #fff;
line-height: 20px;
display: inline-block;
}
#right_bar {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 30%;
overflow: auto;
padding: 0;
}
and as html
<div id="bar_wrapper" onclick="toggleMenu()">
<div>
<div id="menu_list">
<p>Info</p>
<p>About</p>
</div>
<div style="width:30%; height:100%; position:fixed; top:0; right:0; bottom:0;">
<h4>
Info
</h4>
</div>
</div>
</div>
but that, like other things that I have tried, does not quite do it.
try this:
jsfiddle.net/TiG3R/bLksqtpw
for rotating navbar you should rotate navbar div not rotate tabs, look at example
use css transform property on your default navbar.
#div_name {
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
but I think it won't look responsive.but will look exactly as like u want
enter image description here
please take a look at the image
My Challenge ist the following. The Blue is a div with a background image. The angle should be -6deg. In this div we have transparent png (here the 2 people). The Peoples head are allowed ^^° to get out of the div. but not the legs. And the Image should be animated so that they can "walk" from left to right.
The Problem is for me, that i have no Idea how to archiv the part with heads can "leave" the box but the legs need a "overflow" hidden.
The Blue box should be 100% in width, so rotate -6deg to the div and +6deg to the people doesnt work.
Thank you for my help. If it shouldnt be clear what my problem ist, just ask. Englisch is not first language ^^ Thanks.
Edit: No "Cover" divs. There is a gradient i need to see. the white area above and beneath the blue has to be transparent.
EDit2: I think i got it ^^ Look at this Thanks to SD. !
https://jsfiddle.net/rsr04udj/
You can try some tricks to cover legs and not heads.
Please check this demo I have create small example with text only. You can replace text with images you have.
<div class="wraper">
<div class="whitebar">
<div class="people">PEOPLE</div>
</div>
</div>
Demo
You could use a combination of z-index and pseudo elements for this kind of functionality, meaning that rather than 'hiding the legs', you can sandwich it behind one skewed pseudo and in front of another, creating this 'bottom hidden and top shown' effect:
JsFiddle Demo
Demo Snippet (view snippet in full screen)
.people {
background: url(http://fs2.directupload.net/images/150304/f48hrkmk.png) no-repeat;
background-size: 200px 300px;
height: 300px;
width: 200px;
position: absolute;
bottom: 0;
left: 0;
z-index: 7;
transition: all 6s;
}
.wrap:hover .people {
left: 100%;
}
.wrap {
height: 400px;
width: 100%;
position: relative;
background: lightblue;
overflow: hidden;
}
.wrap:before {
height: 50%;
width: 100%;
content: "";
position: absolute;
top: -20%;
z-index: 6;
left: 0;
-webkit-transform: skewY(-6deg);
-moz-transform: skewY(-6deg);
transform: skewY(-6deg);
background: white;
}
.wrap:after {
height: 50%;
width: 100%;
content: "";
position: absolute;
bottom: -20%;
z-index: 8;
left: 0;
-webkit-transform: skewY(-6deg);
-moz-transform: skewY(-6deg);
transform: skewY(-6deg);
background: white;
}
<div class="wrap">
<div class="people"></div>
</div>
<div class='wrapper'>
<div class='blue-container'>
<div class='people></div>
</div> //remove overflow hidden
<div class='bottom-div></div> // use this div to hide the legs
z-index: 100;
</div> // make this overflow : hidden
I see that you don't have in your code on the .wrapper class position relative.
This is a problem when you use some inner child as absolute It sometimes can be the reason to some problems like this or unwanted scrollbar.
In case there's no relative parent then the absolute will be relative to the window.
(In case of unwanted scrollbar: There's cases when you want the parent to have the overflow hidden and the absolute with scrollbar i saw some people use to put overflow on the html and the body which is bad practice in my opinion but it can cause more issues than benefits, but it's not your case here).
in your case:
.wrapper{
...
position:relative;
}
for the children (in your case whitebar):
.whitebar {
...
height:600px;
}
How to center align an absolute positioned title that cant be of a fixed width?
Some titles can have 3 letters, but also 5,6 words.
So this code doesnt work properly
position: absolute;
margin-left:-205px;
left: 50%;
White container is the title I'm trying to align to the center of an image
http://s29.postimg.org/57cicvi2f/aaaaaaaa.jpg
First answer by #Nate is a good method to start with. Stretch the title via (left and right of 0) and apply text-align of center.
If shrinkwrapping behavior of an absolute block is important (i.e., it is desirable for the title to stretch only as far as its contents), then you can use translateX() transform method: http://jsfiddle.net/8h9Th/.
HTML:
<h1>Site Title</h1>
CSS:
h1 {
font: bold 24px/2 Sans-Serif;
padding: 0 24px;
color: #fff;
background-color: #000;
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
you would need to give it a left position and a right position which are equal and then use text-align:center Here is an example:
HTML:
<div class="title">This Is A Title</div>
CSS:
.title {
position:absolute;
left:0;
right:0;
text-align:center.;
}