I've been trying to create a titlebar and left-side panel using div's and css, but as in the screenshot below,
is it possible to create a curvature using css, similar to the red
curvature I've drawn with paintbrush?
You'll also notice a visible blue colour difference between
the yellow arrows. Is it possible to have a more uniform gradient?
I'd like a uniform gradient on the vertical and horizontal panels.
What I'm actually trying to achieve is shown in the bottom half of
the image. A uniform panel with shadows at the edges. Is it possible
to create using CSS or do I have no other option other than to design
it in GIMP and use an image for the entire vertical and horizontal
panel (it's hard to design in GIMP too)?
A jsfiddle example or a link to an existing example would help best. I'm not new to programming, but am new to css.
You could use :after :pseudo-element for that cut and apply inset box-shadow to achieve this.
For the text Logo, Title and Menu you could add spans and apply display: inline-block to first two spans.
body {
background: #C4C4FF;
}
div {
width: 250px;
height: 100px;
position: relative;
background: #8080FF;
}
div:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: 50%;
background: #C4C4FF; /* This color must be same as background */
border-top-left-radius: 30px;
box-shadow: inset 6px 6px 10px -6px #666;
}
span {
display: block;
font-weight: bold;
font-size: 18px;
color: white;
width: 125px;
height: 50px;
text-align: center;
line-height: 50px;
}
div span:nth-of-type(1),
div span:nth-of-type(2) {
display: inline-block;
}
<div>
<span>Logo</span
><span>Title</span>
<span>Menu</span>
</div>
Related
I've got a mockup for a website which has a hero section consisting of two sections, split diagonally at the same angle. The two sections have content and need to scale to fit the content.
I have tried the method described here: two divs split with diagonal line - CSS
but it doesn't work well with content; adding text to the div just extends the rectangle not the triangle. How do I get the boxes to scale with the content?
I would post a comment but I don't have the reputation :/
EDIT: by scaling to content, I mean that the if I add content to one of the divs, the div should be able to fit all of the content inside of it. Both of the divs would need to be the same height. Apologies for any confusion :)
The question is not so clear as to :
scaling to content
I suppose it means that it should keep the same aspect after window resize (??).
// Create a flex container
.hero {
display: flex;
height: 500px;
width: 100%;
flex-flow: row nowrap; // make the two divs side by side
font-size: 2em;
color: white;
font-family: sans-serif;
position: relative;
}
// apply basic styles to the divs
.hero div{
display: flex;
position: relative;
background-color: tomato;
width: 50%;
padding: 50px;
}
// + 100px for :after and :before to fit
// + 10px for the space we really want to see between diagonal
.hero div:first-child{
margin-right: 110px;
}
.hero_1:after, .hero_2:before{
content:'';
position: absolute;
top: 0;
width: 0;
height: 0;
}
// Add a triangle at the end and starts of both divs to simulate diagonal
.hero_1:after {
left: 100%;
border-top: 500px solid tomato;
border-right: 100px solid transparent;
}
.hero_2:before {
right: 100%;
border-bottom: 500px solid tomato;
border-left: 100px solid transparent;
}
Please have a look to this codepen. The split is made with a diagonal line, and it fits to window resizes.
If it's not the desired effect, please edit the question to be more explicit about "scaling to content" I'll be happy to help.
Quick and simple question,
is there a quick way to change on a button, the distance from the borders edge to the "real" edge of the element.
I dont want to get the border further away, i want that the background is spread 1 or 2 px more over the edge of the border.
Google does not show me the right solution or I'm searching with wrong terms, hope some of you can help me.
Since my question is not clear, here is an picture of what try to achieve
https://picload.org/view/rpogroor/test.png.html
What you need to use over here is the pseudo element. The trick is to have a normal button but not to use a border on that. Insted, use an :after pseudo element and using CSS positioning, we can simulate the effect you want, that is, the background spreads beyond the dashed border.
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
button {
-webkit-appearance: none;
background: #ede032;
padding: 10px 20px;
border-radius: 20px;
border: 0;
position: relative;
margin: 40px;
}
button:after {
content: "";
position: absolute;
top: 3px;
right: 3px;
left: 3px;
bottom: 3px;
border: 1px dashed #515151;
border-radius: 20px;
}
<button>Hello There</button>
Here, the code is pretty self explanatory. I am having a simple button, where am setting some basic styles like background, border-radius and so on. Later, am having an :after pseudo where I use the dashed border which then I overlay over the button using CSS Positioning.
Your question is un-clear. What do you mean by
from an borders edge to the "real" edge of the element.
Are you trying to not display the border? If that's the case then you can always set the border to have a transparent color which would not show the border.
You can add padding to the button to increase space between its contents and the edge of the button.
Is this what you want?
padding:5px 10px ;
This means that the : Top and bottom padding are 5px.
Right and left padding are 10px.
By default a button has padding : 1px 6px; So to increase it by 1 or 2 pixels, just use appropriate values.
.spaced-out {
padding: 5px 10px;
}
<button>Hello</button>
<br><br>
<button class="spaced-out">Hello</button>
You want box-sizing:border-box.
This will ensure that, no matter the border-width, the element will be the same size. I assume this is what you want although the question is not very clear what you're looking for.
Notice the difference between the boxes with borders:
.flex-cont {
display: flex;
width: 100%;
height: 300px;
align-items: center;
justify-content: center;
}
.flex-item {
margin: 10px;
height: 200px;
background: blue;
flex: 1;
border: solid 20px green;
}
span {
display: block;
position: relative;
top: 45%;
text-align: center;
width: 100%;
}
.one {
box-sizing: content-box;
}
.two {
border: none;
}
.three {
box-sizing: border-box;
}
<div class="flex-cont">
<div class="flex-item one"><span>box-sizing: content-box</span></div>
<div class="flex-item two"><span>No border</span></div>
<div class="flex-item three"><span>box-sizing: border-box</span></div>
</div>
Here is a new JS fiddle based on your edit.
New JS Fiddle
For a given word wrapped in a span element, I am trying to make a tooltip appear on hover using plain CSS only (without the various tooltip functions, the reason being that I need to have LaTeX displayed within the tooltip). The tooltip itself is a span within its parent span. Currently I'm getting a tooltip that is off center (left) while I'm trying to achieve the result on the right:
JSFiddle here. I've tried various combination of display (inline, table, block) with auto 0 margin etc. unsuccessfully.
Try adding the following css property and let me know how that works for you:
.link-cont:hover .tooltip{
display: table;
left: 10%;
}
You ought to be able to adjust to suit your needs - 10% seemed to do the trick with this particular example.
(I've updated your JS fiddle for you with the above)
It's because your tool tip is position absolute. You can't use margin auto on absolute.
Try having your container to place the tool tip above the text absolute and then have another child element inside that is relative. You can the give that element margin auto.
A fairly easy way to center the tool-tip is to create a wrapper .tip-wrap that is
a child element of the link text block .link-cont. tip-wrap has the same width
as its parent and has text-align: center to center the inline-block .tooltip.
.tip-wrap is absolutely positioned just above the top border of .link-cont.
Since you specifiec a height of 20px, and the decorative triangle is 5px, the
top offset is 25px.
Note: If your tool tip is longer than the link text, then you need to make some
adjustments to the positioning of the .tip-wrap. Specify a sufficiently long
width (the exact length does not matter), and then apply a negative margin equal
to half of the specified width.
.tip-wrap {
position: absolute;
left: 50%;
margin-left: -100px;
bottom: 25px;
width: 200px;
display: none;
text-align: center;
}
.link-cont {
display: inline-block;
cursor: default;
position: relative;
background: grey;
width: auto;
text-align: center;
white-space: nowrap;
overflow: visible;
}
.tooltip {
background: #000;
color: #fff;
text-decoration: none;
padding: 15px;
border-radius: 10px;
display: inline-block;
height: 20px;
height: auto;
text-align: center;
}
.link-cont:hover .tip-wrap {
display: block;
}
.tooltip .tooltip-triangle {
display: block;
position: absolute;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
content: "";
}
.tooltip .tooltip-triangle {
border-top: 5px solid #000;
bottom: -5px;
left: calc(50% - 5px); /* slightly more accurate */
}
<p>Text.
<br>
<br>
<br>This is a <span class="link-cont">loooooooooooooooooooooooooong
<span class="tip-wrap"><span class="tooltip ">the content<span class="tooltip-triangle"></span></span>
</span>
</span> word.</p>
<p>This is a sentence containing a <span class="link-cont">short
<span class="tip-wrap"><span class="tooltip ">the short word content<span class="tooltip-triangle"></span></span>
</span>
</span> word and a few extra at the end.</p>
I want to vertically center a text by its underline and overline. The text element is inside a div that is absolutely positioned and has an unknown (variable) height. The text's font size and horizontal position also have to be variable.
In other words: I want to position the text so that the center between underline and overline is exactly at the center of the containing div.
Additionally, I want to display a rectangle (using a div) in front of the text:
<div class="container">
<div class="rectangle"></div>
<div class="text">Text</div>
</div>
Here's an example: http://codepen.io/zabbarob/pen/CHxLe
* { margin: 0; padding: 0; border: 0; }
.container {
position: absolute; top: 5px; height: 25px;
zoom: 800%; /* debugging */
vertical-align: middle;
}
.rectangle {
display: inline-block;
width: 50px; height: 100%;
background-color: green;
}
.text {
display: inline-block;
text-decoration: underline overline;
font-size: 20px;
position: absolute; left: 50px;
background: lightgreen;
/* center vertically by underline and overline */
top: 0; bottom: 0;
line-height: 25px;
}
Hmm, rather than using an actual overline/underline (which could be a bit of a headache to customize), have you considered mimicking it using border top/bottom instead? So you could modify your CSS definition for text as follows:
.text {
display: inline-block;
/*text-decoration: underline overline;*/
font-size: 20px;
position: absolute; left: 50px;
background: lightgreen;
/* center vertically by underline and overline */
top: 0; bottom: 0;
line-height: 23px; /* Height of the element beside it, minus 2px for the borders */
border-top:1px solid #000;
border-bottom:1px solid #000;
}
Here's a modified CodePen to demonstrate. Depending on your requirements, this may not be optimal (for example, border scales with zoom, whereas underline does not), but it does at least give you a different way of approaching the problem.
Hope this helps! Let me know if you have any questions.
Have you tried using the methods outlined here: http://css-tricks.com/centering-in-the-unknown/ ?
Always works for me.
Hope this helps
I have a table TD and on the right of it I want to add a 1 pixel border, so I've done this:
table td {
border-right:1px solid #000;
}
It works fine but the problem is that the border's height takes the total TD's height.
Is there a way to set the height of the border?
I have another possibility. This is of course a "newer" technique, but for my projects works sufficient.
It only works if you need one or two borders. I've never done it with 4 borders... and to be honest, I don't know the answer for that yet.
.your-item {
position: relative;
}
.your-item:after {
content: '';
height: 100%; //You can change this if you want smaller/bigger borders
width: 1px;
position: absolute;
right: 0;
top: 0; // If you want to set a smaller height and center it, change this value
background-color: #000000; // The color of your border
}
No, there isn't. The border will always be as tall as the element.
You can achieve the same effect by wrapping the contents of the cell in a <span>, and applying height/border styles to that. Or by drawing a short vertical line in an 1 pixel wide PNG which is the correct height, and applying it as a background to the cell:
background:url(line.png) bottom right no-repeat;
Yes, you can set the line height after defining the border like this:
border-right: 1px solid;
line-height: 10px;
For td elements line-height will successfully allow you to resize the border-height as SPrince mentioned.
For other elements such as list items, you can control the border height with line-height and the height of the actual element with margin-top and margin-bottom.
Here is a working example of both:
http://jsfiddle.net/byronj/gLcqu6mg/
An example with list items:
li {
list-style: none;
padding: 0 10px;
display: inline-block;
border-right: 1px solid #000;
line-height: 5px;
margin: 20px 0;
}
<ul>
<li>cats</li>
<li>dogs</li>
<li>birds</li>
<li>swine!</li>
</ul>
Building on top of #ReBa's answer above, this custom-border class is what worked for me.
Mods:
working with border instead of backaground-color since background-color is not consistent.
Setting height & top of the properties of :after in such a way that the total comes up to 100% where bottom's value is implicit.
ul {
list-style-type: none;
display: flex;
flex-direction: row;
}
li {
padding: 10px;
}
.custom-border {
position: relative;
}
.custom-border:after {
content: " ";
position: absolute;
border-left: 1px #6c757d solid;
top: 35%;
right: 0;
height: 30%;
margin-top: auto;
margin-bottom: auto;
}
<ul>
<li class="custom-border">
Hello
</li>
<li class="custom-border">
World
</li>
<li class="custom-border">
Foo
</li>
<li class="custom-border">Bar</li>
<li class="custom-border">Baz</li>
</ul>
Good Luck...
No, you cannot set the border height.
This will add a centered border to the left of the cell that is 80% the height of the cell. You can reference the full border-image documentation here.
table td {
border-image: linear-gradient(transparent 10%, blue 10% 90%, transparent 90%) 0 0 0 1 / 3px;
}
Just like everyone else said, you can't control border height.
But there are workarounds, here's what I do:
table {
position: relative;
}
table::before { /* ::after works too */
content: "";
position: absolute;
right: 0; /* Change direction for a different side*/
z-index: 100;
width: 3px; /* Thickness */
height: 10px;
background: #555; /* Color */
}
You can set height to inherit for the height of the table or calc(inherit - 2px) for a 2px smaller border.
Remember, inherit has no effect when the table height isn't set.
Use height: 50% for half a border.
Demo
table {
border-spacing: 10px 0px;
}
.rightborder {
border-right: 1px solid #fff;
}
Then with your code you can:
<td class="rightborder">whatever</td>
Hope that helps!
Currently, no, not without resorting to trickery. borders on elements are supposed to run the entire length of whatever side of the element box they apply to.
.main-box{
border: solid 10px;
}
.sub-box{
border-right: 1px solid;
}
//draws a line on right side of the box.
later add a margin-top and margin-bottom.
i.e.,
.sub-box{
border-right: 1px solid;
margin-top: 10px;;
margin-bottom: 10px;
}
This might help in drawing a line on the right-side of the box with a gap on top and bottom.
table td {
border-right:1px solid #000;
height: 100%;
}
Just you add height under the border property.