i have searched over an hour right now after this. Im trying to find how to style a div's apperance.
http://i.gyazo.com/b3e39c4d80c74e559e832c4d22bb87c2.png
The picture show a black div with a "arrow" side on the left. How do you make those things?
here is a quick way to accomplish this.
jsfiddle demo
css
#frame{
width:90%;
border: 20px solid lightblue;
background:black;
}
.title{
font-size:3em;
position:absolute;
color:white;
top: 60px;
margin-left:80px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid lightblue;
}
html
<div id="frame">
<div class="arrow-right"></div>
<div class="title">Some text here!</div>
</div>
I would use an inverted arrow (border hacks using top and bottom border) to achieve this. You can also make it part of a pseudo-element so that your markup remains clean.
#import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200);
body {
background: #BCDEB1;
}
h1 {
font-family: 'Yanone Kaffeesatz';
float:right;
background: black;
position: relative;
color: white;
padding: 0.5em 0.5em;
line-height: 1em;
margin-right: 0.1em;
box-shadow: 0.1em 0.1em 0em 0 rgba(0, 0, 0, 0.2);
}
h1:after {
content: '';
position: absolute;
right: 100%;
top: 0;
border: 0 solid black;
border-left: 0.5em solid transparent;
border-top-width: 1em;
border-bottom-width: 1em; /* 1 + 1 = 2. The parent is 1em line height + 0.5em top padding + 0.5em bottom padding */
box-shadow: 0.1em 0.1em 0em 0 rgba(0, 0, 0, 0.2);
}
<h1>Administration and etc?</h1>
Because the triangle is angled, it may be worth looking into SVG as the content of a :before pseudo element.
Here is a codepen that I almost completed for you using only CSS. http://codepen.io/anon/pen/dPVERJ
You may have to tweak it a bit to get it looking exactly like the image.
I used cssarrowplease to generate the basic arrow and tweaked it from there.
Also see http://css-tricks.com/snippets/css/css-triangle/
I would google something like this before asking here, this is a problem that has been figured out many times over.
Related
So I have this code:
<h1 id="result" style="color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">
text
</h1>
How can I make a border that if I put a longer text in, my border will keep its position and change its size, to make my text still in the border? Thanks!
Just adding border: 1px solid black (for example) to what you have works perfectly fine. The h1 element will grow and shrink to fit it's content and the border will do so as well:
const result = document.getElementById('result');
const sentence = "HELLO! IT LOOKS LIKE THIS IS WORKING FINE...";
let index = 0;
setInterval(() => {
index = (index % sentence.length) + 1;
result.innerHTML = sentence.slice(0, index);
}, 250);
#result {
position:absolute;
top: 10%;
left: 10%;
padding: 0 .5rem;
font-family: Sans-Serif;
font-size: 2rem;
line-height: 3rem;
color: black;
border: 3px solid black;
border-radius: 3px;
min-height: 3rem;
}
<h1 id="result"></h1>
Anyway, I suspect you may be referring to the border changing your element's dimension:
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
}
<div id="bar1"></div>
<div id="bar2"></div>
That's because by default, your element's width and height are actually a sum of the specified width and height properties, plus padding plus border, as you can see from the example above.
If that's the case, you have two options to keep the dimensions just as specified with width and height:
Using box-sizing: border-box. That will make padding and border included in the element's total width and height.
Using box-shadow instead of border. You can use the inset property to draw the shadow to the inside of the element instead of to the outside.
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
box-sizing: border-box;
}
#bar3 {
width: 50%;
height: 1rem;
background: yellow;
margin: .25rem;
box-shadow: inset 0 0 0 3px black;
}
#bar4 {
width: 50%;
height: 1rem;
background: lime;
margin: .25rem;
box-shadow: 0 0 0 3px black;
}
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
<div id="bar4"></div>
Note the 4th bar, the one with the outer box-shadow looks bigger, but if you inspect it, its dimensions are exactly the same as those in the other 3 bars.
Can you just add border: solid 1px black; to the style attribute, like this?
<h1 id="result" style="border: solid 1px black; color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">text</h1>
Fiddle: https://jsfiddle.net/myingling/LL57yd8j/
Here's some reading on CSS borders: https://www.w3schools.com/css/css_border.asp
Note: This question is similar to this question; however, it is different and thus is being asked as a separate question to the one just linked.
I am trying to create a flat long shadow in CSS for the text in a logo. The original way I found to do it is based on Matt Lambert's tutorial. The way Matt proposes to do it would require a lot of CSS (although, kudos to him, it does work and goodness knows I didn't figure that out). So thus that led me to ask for a way to do that with less CSS. #vals figured out how to do that with this.
Now I'm attempting to make a flat-long-shadow (does anyone have a shorter abbreviation for this? how about the acronym: "FLS?") for the text of a logo (i.e. this); however, it isn't going so well...
As you can see from this fiddle I made, I sort of combine the two techniques... but, while it's not atrocious, it doesn't work perfectly...
Here is the same fiddle in a snippet:
/* shadow color: #2d5986 */
html, body {
height: 100%;
}
body {
display: flex;
flex-flow: column wrap;
overflow: hidden;
}
div {
min-height: 128px;
min-width: 128px;
background-color: #369;
color: white;
font-size: 4em;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
span {
/* background-color: #47a; */
position: relative;
text-align: center;
text-shadow: #2d5986 1px 1px,
#2d5986 2px 2px,
#2d5986 3px 3px,
#2d5986 4px 4px,
#2d5986 5px 5px,
#2d5986 6px 6px,
#2d5986 7px 7px,
#2d5986 8px 8px,
#2d5986 9px 9px,
#2d5986 10px 10px,
#2d5986 11px 11px,
#2d5986 12px 12px,
#2d5986 13px 13px,
#2d5986 14px 14px;
}
.shadow:before, .shadow:after {
content: "";
position: absolute;
right: 0px;
bottom: 15px;
z-index: 1;
transform-origin: bottom right;
}
.shadow:before {
height: 40px; /* increased height */
width: 100%;
left: 0px;
transform: skewX(45deg);
box-shadow: 1px 40px 0px 0px #2d5986; /* 1px in x direction to avoid small gap between shadows */
}
/* .shadow:after {
width: 10px; increased width
height: 100%;
top: 25px;
transform: skewY(45deg);
box-shadow: 10px 0px #2d5986;
} */
<div>
<span class="shadow">
A
</span>
</div>
<div>
<span class="shadow">
a
</span>
<span class="shadow">
b
</span>
</div>
<div>
<span class="shadow">
A B
</span>
</div>
<div>
<span class="shadow">
A B C
</span>
</div>
The main problem is the fact that we are now working with text-shadow instead of box-shadow, and as such the :before and :after pseudo classes don't work (although I attempted to make them work by attaching them to the <span>... and then made the width: 100%).
If there was a way to set the width and height of the text-shadow itself (which is achieved on a box-shadow by using the :before and :after pseudo classes), I feel this would be a piece of cake; however, all my research has not found how to do this for a text-shadow.
Does anyone know a way to make a flat long shadow for text with minimal CSS - potentially by somehow changing the width and height of the text-shadow?
Thank you.
Though this is no css-only answer, you might give it a try.
Basically, you create the according css in the browser via a short javascript snippet. The upside is, that it makes you very flexible - changing only two parameters instead of several tens of lines of css.
function addDropShadow(element,width,color){
let css = "";
for (var i = 1;i<width;i++){
css += `${color} ${i}px ${i}px,`;
}
css += `${color} ${width}px ${width}px`;
element && (element.style.textShadow = css);
}
let element = document.querySelector(".icon");
let color = "rgb(18, 128, 106)";
addDropShadow(element,15,color);
.container { padding: 50px; background: rgb(34,45,58); } .icon { font-family: "Helvetica Neue", helvetica, arial, sans-serif; font-weight: bold; color: #fff; background-color: rgb(22, 160, 133); height: 150px;width: 150px; font-size: 75px;line-height: 150px; text-align: center; display: block; overflow: hidden; }
<div class="container"><div class="icon">YO</div></div>
I don't think there is a good CSS only approach.
The only posibility that I can think of is creating pseudos with the same text as the base, and use to reduce the amount of shadows to one third:
Notice that the pseudo itself counts as a shadow because it has the color changed to the color of the shadow
.sample {
font-size: 70px;
position: relative;
text-shadow: 1px 1px red, 2px 2px red, 3px 3px red, 4px 4px red, 5px 5px red,
6px 6px red, 7px 7px red, 8px 8px red, 9px 9px red;
}
.sample:after, .sample:before {
content: attr(data-text);
z-index: -1;
color: red;
position: absolute;
}
.sample:after {
left: 10px;
top: 10px;
}
.sample:before {
left: 20px;
top: 20px;
}
<div class="sample" data-text="Sample">Sample</div>
I'm trying to position a 10px height orange bar on the top of my HTML banner. When I put in the code the orange bar is displayed, but it's displayed on the top of the window. How do I move it so it's displayed on the top of the HTML banner? I'd like it in the "Top 10 Wi-Fi Routers" banner
see my jsfiddle: http://jsfiddle.net/huskydawgs/tKn9f/77/
<div id="wrapper-landing">
<p>
A Wi-Fi router is at the center of most people's home networks, but not every router is a good one. It's been a while since we last looked at the best Wi-Fi routers on the market, this week we want to take a fresh look and build a better top five list.</p>
<div class="box-promo-row">
<div class="box-promo-orange"></div>
<h3>
Top 10 Wi-Fi Routers</h3>
<span class="box-promo-content">
The last time we talked about Wi-Fi routers, 802.11ac wasn't really a thing yet, and now that it is and routers that support it have come down in price, it's time to take a fresh look. This week we want to know which routers you think offer the best combination of speed, range, features, customization options, and as always, bang for the buck.</span>
</div>
</div>
</div>
#wrapper-landing {
width: 916px;
margin: 0 auto 50px auto;
padding: 0;
}
#wrapper-landing p {
color: rgb(102, 102, 102);
font-family: 'SegoeRegular',Helvetica,Arial,sans-serif;
font-size: 1.1em;
line-height: 1.6em;
}
.box-promo-row {
width:893px;
margin: 0;
padding: 30px;
border-left: 1px solid #e2e3e4;
border-right: 1px solid #e2e3e4;
border-bottom: 1px solid #e2e3e4;
margin-top: 0;
margin-bottom: 0;
background-color: #e2e3e4;
box-shadow: 1px 2px 0px rgba (0,0,0,0.15);
}
.box-promo-row h3 {
font-family:SegoeBold, Helvetica, Arial;
font-size:1.3em;
color:#2251a4;
margin: 0 0 2px 0;
}
.box-promo-content {
color: #616161;
font-family: 'SegoeRegular',Helvetica,Arial,sans-serif;
font-size: 1em;
line-height: 1em;
}
.box-form-body {
display: inline-block;
width: 100%;
}
.box-promo-orange {
position: absolute;
content: "";
width: 100%;
height: 10px;
background: #f66511;
left: -1px;
top: 0;
z-index: 20px;
border: 1px solid #f66511;
}
You'd have to use relative positioning on .box-promo-row
or
you don't use a separate element at all and use an orange border?
.box-promo-now{
border-top: 10px solid orange;
}
please update this code with your CSS and the orange line will come just above the header..
.box-promo-row {
position:relative; /*Added this line*/
width:893px;
margin: 0;
padding: 30px;
border-left: 1px solid #e2e3e4;
border-right: 1px solid #e2e3e4;
border-bottom: 1px solid #e2e3e4;
margin-top: 0;
margin-bottom: 0;
background-color: #e2e3e4;
box-shadow: 1px 2px 0px rgba (0,0,0,0.15);
}
.box-promo-row:before {
position: absolute;
content: " ";
width: 100%;
height: 10px;
background: #f66511;
left: -1px;
top: 0;
z-index: 20px;
border: 1px solid #f66511;
}
Here is the Working Demo. http://jsfiddle.net/kheema/tKn9f/87/
Your .box-promo-orange CSS should set position: relative instead of absolute. Absolute means it positions it relative to the whole page. Relative positions it relative to the parent container (in this case box-promo-row).
Use
.box-promo-row {
position: relative;
}
I have a link which is a box like the SO 'Ask Question' button but I want the right of it to point like an arrow.
This http://jsfiddle.net/U4zXS/1/ is what I have so far. I have the right side rounded but I need it to be in a point like an arrow.
<a class="arrow_link" href="{$base_url}signup">GET STARTED WITH OUR <span class="purple">FREE TRIAL</span></a>
.arrow_link{
float: left;
background-color: $color-orange;
border-radius: 0 25px 25px 0;
padding: 4px 15px 6px 8px;
margin-top: -5px;
font-weight: bold;
color: $color-white;
}
a{
text-decoration: none;
}
You can try with the borders triangle method:
.arrow_link::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 100%;
border-style: solid;
border-color: transparent #F78E1E;
border-width: 15px 0 15px 15px;
width: 0;
height: 0;
}
Notice that you'll also have to add position: relative to the .arrow_link itself.
Here's the updated fiddle: FIDDLE
You can use the CSS :after psuedo-element as followed:
.arrow_link { position: relative; }
.arrow_link:after {
content: '';
display: block;
border: 10px solid transparent;
border-left-color: red;
top: 0;
right: -20px;
}
This will append a psuedo-element to your a, which will show the arrow using the border trick as explained very well on CSS Tricks.
You can use a pseudo element to make the triangle at the end of the element. Here is some more info about pseudo elements that should help you get started with them.
Here is the changed css:
.arrow_link{
float: left;
background-color: $color-orange;
padding: 4px 15px 6px 8px;
margin-top: -5px;
font-weight: bold;
color: $color-white;
position: relative;
}
.arrow_link:after {
content: "";
display: block;
position: absolute;
border-left: 15px solid #f78e1e;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
left: 100%;
top: 0;
}
Finally, a fiddle: Demo
The only problem you will have is due to your element not having a fixed height, won't be a problem if your element doesn't change. CSS triangles are not the most flexible thing to use but they do the trick.
Have a look at this http://jsfiddle.net/WW32n/1/ and some references here http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
<p class="triangle-isosceles right">The entire appearance is created only with CSS.</p>
and the css
.triangle-isosceles {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c; /* default background for browsers without gradient support */
/* css3 */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(#f9d835, #f3961c);
background:-o-linear-gradient(#f9d835, #f3961c);
background:linear-gradient(#f9d835, #f3961c);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
/* creates triangle */
.triangle-isosceles:after {
content:"";
position:absolute;
bottom:-15px; /* value = - border-top-width - border-bottom-width */
left:50px; /* controls horizontal position */
border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
border-style:solid;
border-color:#f3961c transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
I'm trying to get some elements to move slightly when the user mouses over them (they form buttons on a navbar). However, my code doesn't seem to work. The text in the boxes should also be clickable but that doesn't seem to work either. Here's the code:
#navbar {
position: relative;
width: max-width;
height: auto;
margin-left: 2%;
}
.nav_tab{
background-image: url('dark_exa.png');
border: 2px dashed grey;
/* rounded borders of 5px in firefox */
-moz-border-radius:10px;
/* rounded borders of 5px in chrome and other browsers */
-webkit-border-radius:10px;
/* rounded borders of 5px in browsers that support css3 */
border-radius:10px;
/* shadows for different browsers */
-moz-box-shadow: 0 0 0 3px black, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 3px black 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 3px black, 2px 1px 6px 4px rgba(10,10,0,.5);
position: relative;
height: auto;
width:20%;
z-index: -1;
margin-left: 2%;
margin-right: 2%;
top: -30px;
display: inline-block;
}
.nav_tab:hover{
position: relative;
top: +5px;
}
h1 {
font-size:40px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 20px;
margin-top: 130px;
}
h2 {
font-size:30px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 10px;
margin-top: 40px;
}
And the HTML:
<div id="navbar">
<div class="nav_tab"><h2>Zues</h2></div>
<div class="nav_tab"><h2>Jack</h2></div>
<div class="nav_tab"><h2>Denise</h2></div>
<div class="nav_tab"><h2>Joel</h2></div></div>
I'm not entirely sure what's going on here, though I presume it's some kind of parent-child issue.
Thanks.
The link is not clickable because you gave the .nav_tab class a negative z-index value just adjust it to a value => 0 and it'll work.
The z-index: -1; of the .nav_tab css it's your problem, it makes the container behind the page so any mouse event won't work (hover, pointer, etc) remove it and your ready to go:
see the jsfiddle demo:
http://jsfiddle.net/QmVFR/64/