I am trying to build the flag of Bosnia and Herzegovina which looks like this.
I am trying to achieve how the stars are lined up. They are laid on a 45deg tilted axis but the stars themselves aren't rotated.
The following is the bare minimum code I am trying but it rotates the stars too.
Is there a way to avoid it?
P.S - I am not allowed to add another element to DOM.
.flag {
position: relative;
width: 300px;
height: 200px;
}
.flag::before {
position: absolute;
content: '★★★★★★★★★';
color: black;
font-size: 3rem;
letter-spacing: 0.33rem;
transform: translateY(-50%) rotate(45deg);
top: 50%;
}
<div class="flag"></div>
Better idea: use text-shadow! Basic CSS:
div {
font-size: 5em;
text-shadow: .5em .5em, 1em 1em, 1.5em 1.5em, 2em 2em, 2.5em 2.5em, 3em 3em, 3.5em 3.5em, 4em 4em;
}
<div>★</div>
Original idea
Kind of ugly, but you could put tabs between the stars, then use a ch-valued font-size and play with tab-size and line-height. Basic idea:
.star {
font: 6.5ch/.5 monospace;
tab-size: .75ch;
}
<pre class='star'>★
★
★
★
★
★
★
★
★</pre>
quick attempt at the actual flag
Note that it only seems to work in Chrome. ☹
.flag {
position: relative;
width: 300px;
height: 200px;
transform: rotate(-45deg);
}
.flag-star:before {
font-size: 3rem;
content:"★";
display: inline-block;
}
.deg-1{
transform: rotate(47deg);
}
.deg-2{
transform: rotate(48deg);
}
.deg-3{
transform: rotate(49deg);
}
.deg-4{
transform: rotate(50deg);
}
.deg-5{
transform: rotate(51deg);
}
.deg-6{
transform: rotate(52deg);
}
.deg-7{
transform: rotate(53deg);
}
<div class="flag">
<div class="flag-star deg-1"></div>
<div class="flag-star deg-2"></div>
<div class="flag-star deg-3"></div>
<div class="flag-star deg-4"></div>
<div class="flag-star deg-5"></div>
<div class="flag-star deg-6"></div>
<div class="flag-star deg-7"></div>
</div>
EDIT: Rotate .flag::before two time first 45deg then 170deg.
.flag {
position: relative;
width: 300px;
height: 200px;
}
.flag::before {
position: absolute;
content: '★★★★★★★★★';
color: black;
font-size: 2rem;
letter-spacing: 0.33rem;
transform: translateY(-50%) rotate(45deg) rotate(170deg);
top: 50%;
}
<div class="flag"></div>
Related
I'm trying to achieve this look (not the red container, just the text):
I've tried using tranform: scale and transform: skew to no avail, as they pull the entire axis at once and don't allow the input of two arguments for left and right. The only thing left I can think to do is use 3d transform with perspective, but I could not get that to work either.
Terrible example of things I've tried:
https://codepen.io/fortypercenttitanium/pen/YzNLEoR
<div class="container">
<h1 class="text-cone">Player 1:</h1>
</div>
.container {
background: red;
display: flex;
width: 400px;
height: 200px;
}
.text-cone {
font-size: 5rem;
/* transform: scale(1, 0.6); */
/* transform: skew(0deg, 15deg); */
/* transform: rotateY(45deg); */
}
You can achieve this with perspective and rotateY.
Here's an example:
body {
display: flex;
justify-content: center;
align-items: center;
}
h2 {
color: black;
font-size: 80px;
font-family: sans-serif;
font-weight: bold;
transform: perspective(200px) rotateY(-60deg);
}
<h2>Some Text</h2>
I have 2 divs 50% width each. There is a huge header h1 which should have the color of these two divs. I have tried mix-blend-mode but it gives me some random colors when set to difference. My goal is to invert the colors but to keep the colors of the divs. This is a codepen file, I have tried to keep it as simple as possible: https://codepen.io/lukagurovic/pen/MLoZmj
The final effect is supposed to look like on in this example:
https://jsfiddle.net/1uubdtz6/
but I am not sure why doesn't it work with these colors.
Also, these divs are interactive so the color has to change dynamicly as divs are increasing in width when hovered, and there should be only stroke of text without any fill
body {
height: 100vh;
width: 100%;
position: relative;
background-color: #510035;
margin: 0 auto;
}
h1 {
font-size: 4.7em;
text-transform: uppercase;
}
.half-pager {
width: 50%;
height: 100%;
position: absolute;
display: inline-block;
overflow: hidden;
text-align: center;
}
.half-pager-dark {
background-color: #510035;
}
.half-pager-light {
right: 0;
background-color: #E8E8E8;
float: right;
}
.lp-header {
position: absolute;
}
.lp-header {
color:transparent;
mix-blend-mode: difference;
-webkit-text-stroke: 3px rgb(126, 124, 133);
z-index: 1;
}
.lp-header {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="box" class="half-pager half-pager-dark"></div>
<div id="box1" class="half-pager half-pager-light"></div>
<h1 class="lp-header">left or right</h1>
One idea is to duplicate the text and use CSS variable to define the color so you can easily change them in one place. I used clip-path to hide half of one text and show the other half:
body {
margin: 0;
--c1:#510035;
--c2:#E8E8E8;
}
body:hover {
--c1:red;
--c2:blue;
}
h1 {
font-size: 4.7em;
text-transform: uppercase;
margin: 0;
}
.first {
background:var(--c1);
-webkit-text-stroke: 3px var(--c2);
}
.second {
background:var(--c2);
-webkit-text-stroke: 3px var(--c1);
clip-path:polygon(0% 0%, 50% 0%, 50% 100%,0% 100%);
}
.lp-header {
position:absolute;
top:0;
left:0;
right:0;
min-height:100vh;
box-sizing:border-box;
color: transparent;
z-index: 1;
padding: 50px;
text-align: center;
transition:0.5s;
}
<h1 class="lp-header first">left or right</h1>
<h1 class="lp-header second">left or right</h1>
I have a requirement that can be solved using a marquee
.ticker {
white-space: no-wrap;
}
.item {
display: inline-block;
cursor: pointer;
}
<marquee class="ticker" onmouseover="this.stop()" onmouseout="this.start()">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</marquee>
How do we make this compliant with html5 since marquee is deprecated?
I have seen a few examples, but most of them rely on fixed width.
In my example, the items are received from the server so there can be a lot of them. Also, I will need that stop on hover since the items are links to something else.
Thank you very much for your help,
PS: I want to make sure we can't do this in CSS only before I start exploring javascript.
This codepen has a great example of what you're looking for.
To make it pause on hover, I added a hover state to pause the animation:
https://codepen.io/anon/pen/zzpZyg
.marquee:hover div {
-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
animation-play-state: paused;
}
body { margin: 20px; }
.marquee {
height: 25px;
width: 420px;
overflow: hidden;
position: relative;
}
.marquee div {
display: block;
width: 200%;
height: 30px;
position: absolute;
overflow: hidden;
animation: marquee 5s linear infinite;
}
.marquee span {
float: left;
width: 50%;
}
#keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
.marquee:hover div {
-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
animation-play-state: paused;
}
<div class="marquee">
<div>
<span>You spin me right round, baby. Like a record, baby.</span>
<span>You spin me right round, baby. Like a record, baby.</span>
</div>
</div>
Sorry I know I am late. However, I have a simple solution to create a marquee with CSS.
.marquee-container{
overflow:hidden;
}
.marquee{
min-width:100%;
animation: marquee 15s linear infinite;
}
.marquee:hover{
animation-play-state: paused;
}
#keyframes marquee {
from{margin-left : 120%;}
to{margin-left: -20%;}
}
<div class="marquee-container">
<p class="marquee">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
</p>
</div>
Finally I found one that works, and here is the finally product https://fiddle.sencha.com/#view/editor&fiddle/228u
Here is the original one, https://codepen.io/lewismcarey/pen/GJZVoG
<div class="wrapper">
<div class="container">
<span>Span Me 1</span>
<span>Span Me 2</span>
<span>Span Me 3</span>
<span>Span Me 4</span>
</div>
</div>
The trick was to "left-pad" the wrapper to hide the container initially. Then, "right-pad" the container so that the animation only stops/restarts once the container has gone off screen. Both padding are sized relatively. display: block; is added to the container so that the right padding uses the wrapper's size. And finally, we add an animation on the wrapper's transform attribute.
Thank you all,
I am no good at java script
but here is it using html and css
PS. that mouse over thing is not working here
.wrapper {
position: relative;
overflow: hidden;
height: 25px;
width: 100px;
border: 1px solid orange;
}
.wrapper p {
position: absolute;
margin: 0;
line-height: 25px;
white-space: nowrap;
animation: marquee 5s linear infinite;
}
#keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
<div class="wrapper">
<p>Hey, how you're doing? .</p>
</div>
There are lots of information on google about it, just search: "css3 marque", like Neil Kennedy mentioned. One question is very similar to yours and the text stops scrolling after you hover over it. Check this link below: CSS3 Marquee Effect and jsfiddle: http://jsfiddle.net/MaY5A/1/
$(".toggle").on("click", function() {
$(".marquee").toggleClass("microsoft");
});
/* Make it a marquee */
.marquee {
width: 450px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
border: 1px green solid;
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
border: 1px red solid;
animation: marquee 15s linear infinite;
}
.marquee span:hover {
animation-play-state: paused
}
/* Make it move */
#keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Make it pretty */
.microsoft {
padding-left: 1.5em;
position: relative;
font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
/* ::before was :before before ::before was ::before - kthx */
.microsoft:before,
.microsoft::before {
z-index: 2;
content: '';
position: absolute;
top: -1em;
left: -1em;
width: .5em;
height: .5em;
box-shadow: 1.0em 1.25em 0 #F65314, 1.6em 1.25em 0 #7CBB00, 1.0em 1.85em 0 #00A1F1, 1.6em 1.85em 0 #FFBB00;
}
.microsoft:after,
.microsoft::after {
z-index: 1;
content: '';
position: absolute;
top: 0;
left: 0;
width: 2em;
height: 2em;
background-image: linear-gradient(90deg, white 70%, rgba(255, 255, 255, 0));
}
/* Style the links */
.vanity {
color: #333;
text-align: center;
font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.vanity a,
.microsoft a {
color: #1570A6;
transition: color .5s;
text-decoration: none;
}
.vanity a:hover,
.microsoft a:hover {
color: #F65314;
}
/* Style toggle button */
.toggle {
display: block;
margin: 2em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Wanted to see how easily marquees could be constructed with CSS:
- This demo uses -prefix-free to avoid vendor prefixes
- It also requires manual setting of the end text-indent
- Everything below the /* Make it pretty */ comment is non-essential
- Brought to you by #jonathansampson -->
<p class="microsoft marquee"><span>Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the Start screen, charms, and a Microsoft account, you can spend less time searching and more time doing.</span></p>
<button class="toggle">Toggle Beautification</button>
<p class="vanity">
#jonathansampson of
#appendTo
</p>
When we use CSS3 transform: operation1(...) operation2(...), which one is done first?
The first operation done seems to be the one the most on the right., i.e. here operation2 is done before operation1. Just to be sure, is it true?
Note: I have read one thing and its contrary in some places (answers, articles on the internet), thus the question here.
Yes, the first operation done is the one the most on the right., i.e. here operation2 is done before operation1.
This MDN article states indeed:
The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left.
Here is the documentation : http://www.w3.org/TR/css-transforms-1/.
Example 1
Here the scaling is done first, and then the translation of 100px vertically (if translation was done first, the scaling would make the translation of 500px!)
#container {
position: absolute;
transform: translate(0,100px) scale(5);
transform-origin: 0 0; }
<div id="container"><img src="https://i.stack.imgur.com/xb47Y.jpg"></img></div>
Example 2
Here the translation is done first, and then the scaling (the scaling done after makes that the translation looks like a 500px-translation!)
#container {
position: absolute;
transform: scale(5) translate(0,100px);
transform-origin: 0 0; }
<div id="container"><img src="https://i.stack.imgur.com/xb47Y.jpg"></img></div>
This has been mentioned in other answers and comments, but not with enough emphasis in my opinion: the short answer is both ways are valid.
It all depends whether you consider your coordinates attached to your element (left to right) or fixed to the page based on the initial element position (right to left).
Here is an article showing the difference with animations (which makes it easier to understand): Chaining transforms.
Here is a snippet showing the animations from the article:
html, body { height: 100%; }
body {
background: #aaa;
color: #000;
font-family: Calibri,Candara,Segoe,"Segoe UI",Optima,Arial,sans-serif;
overflow: hidden;
margin: 0;
}
.info {
text-align: center;
font-family: Consolas,monaco,monospace;
font-size: 20px;
font-weight: bold;
margin-bottom: 4px;
color: #fff;
}
.split { white-space: nowrap; }
.side {
display: inline-block;
width: 50%;
}
.label {
text-align: center;
font-size: 20px;
}
.container {
position: relative;
font-size: 50px;
margin: .6em auto 0;
width: 0; height: 0;
transform: translateX(-1em);
}
.ltr .object {
position: absolute;
left: 0; top: 0;
width: 1em; height: 1em;
margin: -.5em 0 0 -.5em;
background: rgb(114,34,34);
animation: ltrObj 5s infinite;
}
#keyframes ltrObj {
from, 10% { transform: rotate( 0deg) translateX(0em); }
40% { transform: rotate(45deg) translateX(0em); }
70%, to { transform: rotate(45deg) translateX(2em); }
}
.object.shadow {
animation: none;
opacity: .2;
}
.ltr .axes {
position: absolute;
left: .5em; top: .5em;
width: 1em; height: 1em;
color: #111;
box-sizing: border-box;
border-left: 2px solid;
border-top: 2px solid;
}
.ltr .axes::before, .ltr .axes::after {
content: '';
position: absolute;
width: .2em; height: .2em;
box-sizing: border-box;
border-left: 2px solid;
border-top: 2px solid;
transform-origin: top left;
}
.ltr .axes::before { top: 100%; left: 0; margin-left: -1px; margin-top: 1px; transform: rotate(225deg); }
.ltr .axes::after { top: 0; left: 100%; margin-top: -1px; margin-left: 1px; transform: rotate(135deg); }
.rtl .axes {
position: absolute;
left: 0; top: 0;
width: 2.5em; height: 2.3em;
color: #111;
box-sizing: border-box;
border-left: 2px solid;
border-top: 2px solid;
}
.rtl .axes::before, .rtl .axes::after {
content: '';
position: absolute;
width: .2em; height: .2em;
box-sizing: border-box;
border-left: 2px solid;
border-top: 2px solid;
transform-origin: top left;
}
.rtl .axes::before { top: 100%; left: 0; margin-left: -1px; margin-top: 1px; transform: rotate(225deg); }
.rtl .axes::after { top: 0; left: 100%; margin-top: -1px; margin-left: 1px; transform: rotate(135deg); }
.rtl .object {
position: absolute;
left: 0; top: 0;
width: 1em; height: 1em;
margin: -.5em 0 0 -.5em;
background: rgba(100,0,0,0.8);
animation: rtlObj 5s infinite;
}
#keyframes rtlObj {
from, 10% { transform: rotate( 0deg) translateX(0em); }
40% { transform: rotate( 0deg) translateX(2em); }
70%, to { transform: rotate(45deg) translateX(2em); }
}
.helper-mask {
position: absolute;
left: 0; top: 0;
width: 3em; height: 3em;
overflow: hidden;
}
.helper {
position: absolute;
left: 0; top: -2em;
width: 0; height: 2em;
margin-top: 2px;
box-sizing: border-box;
border: 2px solid #00c;
border-left: none;
border-radius: 0 100% 0 0;
transform-origin: bottom left;
animation: helper 5s infinite;
}
#keyframes helper {
from, 10% { width: 0em; transform: rotate( 0deg); }
40% { width: 2em; transform: rotate( 0deg);}
70%, to { width: 2em; transform: rotate(45deg);}
}
<div class="info">rotate(45deg) translateX(2em)</div>
<div class="split">
<div class="side ltr">
<div class="label">Left to Right</div>
<div class="container">
<div class="object shadow"></div>
<div class="object">
<div class="axes"></div>
</div>
</div>
</div>
<div class="side rtl">
<div class="label">Right to Left</div>
<div class="container">
<div class="axes"></div>
<div class="object"></div>
<div class="helper-mask">
<div class="helper"></div>
</div>
</div>
</div>
</div>
Whether the actual implementation uses left to right or right to left is irrelevant, both are equally valid when creating an animation, as long as you keep the difference in mind.
Transforms are performed left to right. Transforms correspond to matrix operations, and these are performed left to right.
There is intuition behind it, it's not just that this is literally in the spec as a normative rule (point 3 here: https://drafts.csswg.org/css-transforms-1/#transform-rendering)
Here's a pen to try: https://codepen.io/monfera/pen/YLWGrM
Explanation:
Each transform step establishes its own coordinate system. So
transform: translateX(500px);
establishes a new coordinate system 500px along the X axis of its parent, and the element will be rendered there.
Similarly,
background-color: blue;
transform: translateX(500px) rotate(60deg);
first establishes a new coordinate system 500px along the X axis (to the right) of its parent, and only then, within that (translated, but it's now irrelevant) coordinate system does it perform the rotation. So it'll be a shape that's 500px to the right, and rotated in place (around the so-called transform-origin which is interpreted in the local coordinate system, and the default 50% 50% for rotation means, rotation around the center of the rectangle, but it's an aside).
The reverse order
background-color: orange;
transform: rotate(60deg) translateX(500px);
first establishes a new coordinate system that's rotated 60 degrees relative to the parent, and then translates 100px along the X axis of the now rotated coordinate system, in a direction that is not actually to the right from the global viewpoint of the document (or user). So, in this case, it's as if you first rotated the paper, and then slid the shape 500 units along the side of the paper (from the origin, which is in this case the top left corner).
For a more advanced discussion, and understanding of how it's possible to intuitively understand it for both directions, check out Composing Transformations - CSS transforms follow the post-multiplication model, so look for the page with the heading "Think of transformations as transforming the local coordinate frame" (illustrations seem to be a little off though)
It applies the leftmost transformation first.
As you can see in the image above, the first transformation takes a longer distance as compared to the second. The reason is the first example undergoes scale first and then it takes the distance specified by translate based on its new width on the x-axis. Because it is wider now, 50% will cause it to take a longer distance. The measure specified by 50% is calculated by taking half of the width of itself.
the site I cited from
I just created a demo of a 3d room in HTML using CSS transforms. I made a 200x200 DIV for a back wall, leaving it in that position. Then I made a left wall starting in the same size and position, then added
transform: translate3d(-100px,0px,100px) rotateY(90deg).
Then I made a right wall and added
transform: translate3d( 100px,0px,100px) rotateY(90deg).
This created the room correctly. But this is with version 13 of Safari. Originally I tried to list the rotation step first, but the wall was in an odd position. So I'm seeing a right-to-left behavior.
I'm trying to split a page into different shapes, as shown in this image:
The problem is I'm trying to create divs as the shapes in the image so I can put content in them and by changing the css styles change their colors and give them effects with JavaScript,
Searching the net I did come across some sites like CSS Tricks to create CSS Triangles, but that's not exactly what I want because I cant put content in such a div and cant get exactly the shapes I need, I was thinking maybe I could get such results with the element, but i don't really know if its logical to use instead of and can get the effect I want?
is there a way to divide an Html page into any desired shape?
hmm, you can use css3 transformations (rotation):
HTML:
<div class="shape1">
<div class="shape1-content"> ... </div>
</div>
CSS :
.shape1 {
-webkit-transform: rotate(45deg);
}
.shape1-content {
-webkit-transform: rotate(-45deg);
}
Of course, you shoud apply other styles (position: absolute, and others).
UPDATE:
copy'n'paste this code to see live example:
<html>
<head>
<style>
.wrapper {
border: 1px solid #ff8888;
height: 480px;
left: 50%;
margin: -240px 0 0 -320px;
overflow: hidden;
position: absolute;
top: 50%;
width: 640px;
}
.shape1 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
background-color: #fff;
border: 1px solid black;
height: 50%;
left: -25%;
position: absolute;
top: 70%;
width: 150%;
}
.shape1-content {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
padding-left: 230px;
}
.shape2 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
background-color: #fff;
border: 1px solid #88ff88;
bottom: 244px;
height: 100%;
position: absolute;
right: 50%;
width: 100%;
}
.shape2-content {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
bottom: 10px;
position: absolute;
right: 10px;
}
.shape3 {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
border: 1px solid #8888ff;
bottom: 40%;
height: 100%;
position: absolute;
right: 20%;
width: 100%;
}
.shape3-content {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
bottom: 50%;
position: absolute;
right: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="shape3">
<div class="shape3-content">Hi there!</div>
</div>
<div class="shape1">
<div class="shape1-content">Hi there!</div>
</div>
<div class="shape2">
<div class="shape2-content">Hi there!</div>
</div>
</div>
</body>
</html>
In general you can't do that with CSS until the CSS Shapes and Exclusions stuff mentioned here gets added to browsers in a few years http://corlan.org/2012/03/16/css-bleeding-edge-features/
For now basic CSS3 will allow you to create shapes and rotate them, but not with much precision. Your best bet may be to use to use SVG.
Here's an example of using SVG to make a puzzle out of an existing image:
http://lavadip.com/experiments/jigsaw/
A lot more information can be found here:
https://developer.mozilla.org/en-US/docs/SVG/Tutorial
As mentioned earlier you can use a library like http://raphaeljs.com/ to help with creating your SVG graphics.
A warning though it might be a pain in the backside to do :-p