This question already has answers here:
border curved css - circle with curved end
(2 answers)
Closed 2 years ago.
I want to have a tabs like image below, but I don't have any idea to make it.
Make the tab into a png image. Here is one I did really quick. I have a border on the top and no border on the bottom so it will overlay the existing border making appear as it curves up
Then combine it with some styling to get your result
*:focus {
outline: none;
}
.content {
box-sizing: border-box;
background-color: #F7F7F7;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border: 1px solid #d5d1d1;
}
.tabs {
margin-bottom: -1px;
background-color: white;
border: 1px solid #F4C949;
border-radius: 20px;
margin: -1px;
padding: 0px 20px;
padding-top: 8px;
text-align: right;
}
.tab {
position: relative;
z-index: 2;
display: inline-block;
width: 175px;
height: 30px;
margin-bottom: -6px;
padding-top: 8px;
text-align: center;
}
.tab:focus {
background: url(https://i.stack.imgur.com/45ecy.png);
background-size: contain;
background-position: top;
background-repeat: no-repeat;
}
.tab-content {
height: 175px;
}
<div class="content">
<div class="tabs">
<div class="tab tab-active" tabindex="0">
Tab 1
</div>
<div class="tab" tabindex="0">
Tab 2
</div>
</div>
<div class="tab-content">
Click tab to get the effect
</div>
</div>
Related
This question already has answers here:
How to remove the border highlight on an input text element
(21 answers)
CSS: border color of input box has two colors?
(4 answers)
Closed 2 years ago.
Why do buttons and input have this unusual outline with black and grey borders?
I can't tell if this is only my issue, but the border appears on buttons and also inputs.
Here is my code and an image of my navbar:
.navbar-vert-spacer {
height: 10px;
}
.main-nav-bar {
border-radius: 25px;
box-shadow: 2px 2px 8px #d4d4d4;
height: 50px;
width: 1800px;
margin-left: 10px;
margin-right: 10px;
}
.home-icon {
height: 30px;
text-align: center;
padding: 10px;
margin-left: 5px;
}
.search-bar {
background: #D4D4D4;
border-radius: 25px;
height: 10px;
width: 1710px;
padding: 10px;
margin-right: 8px;
margin-top: 8px;
float: right;
}
<div class="navbar-vert-spacer"></div>
<!-- NAVBAR -->
<div class="navbar">
<div class="main-nav-bar">
<a href="http://127.0.0.1:5000/">
<img class="home-icon" src="static/home.ico">
</a>
<input type="text" placeholder="Search.." class="search-bar">
</div>
</div>
<!-- NAVBAR -->
https://i.stack.imgur.com/y46Sg.png
Because border add default border-color & width
.search-bar {
border: 0;
outline: 0;
}
chrome default styles
there are some styles applied by the browser itself.
if you don't want to have this outline you can use
.search-bar {
outline:none
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 2 years ago.
Improve this question
In this image, how do I get rid of the gray background that automatically appears when I create my CSS header?
.header {
padding: 60px;
margin: 20px auto auto auto;
width: 1400px;
border-radius: 10px;
text-align: center;
background: #1abc9c;
color: white;
}
body {
background: #f2f2f2;
}
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 4500px;
border: 3px solid #1abc9c;
border-right: none;
padding: 5px;
height: 50px;
border-radius: 5px 0 0 5px;
outline: none;
color: #fff;
}
.searchTerm:focus {
color: black;
}
.searchButton {
width: 50px;
height: 50px;
border: 1px solid #1abc9c;
background: #1abc9c;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 900px;
margin: auto;
}
<div class="header">
<h1 style="font-size: 100px;">HI</h1>
<p style="font-size: 30px;">
Hello
</p>
</div>
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" id="input_text" />
<button type="submit" class="searchButton" onclick="send_text()">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="search"></div>
Thanks!
When I add this CSS and HTML I start getting that gray background around the header. However when I comment out the code for the search bar the header does not have the gray background.
The reason is because you are using this in your css, it is creating greyish background in your html:
body {
background: #f2f2f2;
}
Сheck that the html has a class .header
Try changing the background-color of the .header and see what happens
Try setting the background-color for the body and see what happens
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 4 years ago.
I have to draw half diagonal triangle in card i tried but i don't know how to bring the exact output as shown in this image and i have uploaded my code too, so please if anyone know how to achieve as same like image please let me know for reference i have upload the excepted output image here Output
.cards{
border-bottom: 148px solid red;
border-left: 158px solid transparent;
}
.empty-space-section6 {
height: 411px;
width: 230px;
border-color: gray;
margin-left: 20px;
margin-top: 16.5px;
margin-bottom: 52.5px;
background-color: #FFFBE2;
}
<div class="empty-space-section6">
<div class="cards">
</div>
</div>
You need to increase border width and set alignment to right to achieve this. Check updated snippet below:
.cards {
border-bottom: 180px solid red;
border-left: 280px solid transparent;
float: right;
}
.empty-space-section6 {
height: 411px;
width: 230px;
border-color: gray;
margin-left: 20px;
margin-top: 16.5px;
margin-bottom: 52.5px;
background-color: #FFFBE2;
overflow: hidden;
}
<div class="empty-space-section6">
<div class="cards">
</div>
</div>
You can work with positioning to achieve this.
.cards{
border-bottom: 248px solid red;
border-left: 358px solid transparent;
position: absolute;
bottom: 0;
left: -50px;
}
.empty-space-section6 {
height: 411px;
width: 230px;
border-color: gray;
margin-left: 20px;
margin-top: 16.5px;
margin-bottom: 52.5px;
background-color: #FFFBE2;
position: relative;
overflow: hidden;
}
<div class="empty-space-section6">
<div class="cards">
</div>
</div>
I would consider to use instead a simple linear-gradient as the background so you wouldn't need to mess with borders.
e.g.
article {
width: 240px;
height: 360px;
box-shadow: 0 0 5px #999;
background: linear-gradient(-25deg, #9864bb 160px, #ffffff 162px);
}
<article></article>
In this example the gradient starts from bottom to top but of course you can change how it is anchored and the color-stop values.
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 5 years ago.
I'm trying to create the following form with the input fields having a diagonal side so they fit nicely together, see image below for more accurate description.
However i'm unable to achieve this as i have no idea on how to do this. I tried with transparant borders but without succes.
Anyone an idea on how to do this?
I love Ilya's skew solution. Super creative.
Here's an option using some :after pseudo-elements and CSS triangles to create the skewed effect. To achieve the desired effect we add :after pseudo elements to the right-side of the left inputs, and to the left-side of the right input/button.
Here's the end effect:
.container {
display: flex;
flex-direction: column;
background-color: #565452;
padding: 20px;
}
.row {
display: flex;
}
.row:not(:last-child) {
margin-bottom: 60px;
}
.field {
width: calc(100% - 10px);
position: relative;
background-color: #565452;
}
.field:first-child {
margin-right: 30px;
}
.field:after {
content: "";
display: block;
position: absolute;
top: 0;
width: 0px;
height: 0px;
}
.field:first-child:after {
right: -15px;
border-top: 60px solid #ffffff;
border-right: 15px solid transparent;
}
.field:last-child:after {
left: -15px;
border-bottom: 60px solid #ffffff;
border-left: 15px solid transparent;
}
.field.field--button {
flex-basis: 25%;
}
.field.field--button:after {
border-bottom: 60px solid #F9D838;
}
.input {
border: none;
line-height: 60px;
outline: none;
padding: 0 15px;
width: 100%;
box-sizing: border-box;
background-color: #ffffff;
font-size: 18px;
}
.input::placeholder {
color: #cccccc;
}
.button {
background-color: #F9D838;
color: #ffffff;
border: none;
outline: none;
line-height: 60px;
font-size: 30px;
width: 100%;
padding: 0 30px 0 20px;
text-transform: uppercase;
}
<form>
<div class="container">
<div class="row">
<div class="field">
<input class="input" placeholder="Voornaa m" />
</div>
<div class="field">
<input class="input" placeholder="Achternaa m" />
</div>
</div>
<div class="row">
<div class="field">
<input class="input" placeholder="E-mail" />
</div>
<div class="field field--button">
<button class="button" type="submit">Go</button>
</div>
</div>
</div>
</form>
You can apply transform: skewX for the container, "undo" it (by applying the same transform, but with the opposite sign of the angle) for the items, and hide the outer corners with overflow:hidden of the outer container, like this:
form {
margin: 20px;
overflow: hidden;
width: 350px;
}
.row {
display: flex;
transform: skewX(-15deg);
margin: 0 -5px;
}
.cell {
display: flex;
margin: 0 3px;
overflow: hidden;
}
.wide {
flex: 1;
}
.cell > * {
transform: skewX(15deg);
margin: 0 -5px;
border: none;
flex: 1;
}
input {
padding: 4px 5px 4px 15px;
background: yellow;
}
button {
padding: 4px 25px 4px 20px;
background: pink;
}
<form class="outer-container">
<div class="row">
<div class="cell wide"><input placeholder="enter something"></div>
<div class="cell"><button>Press me</button></div>
</div>
</form>
I'd add a seperate span element to the end and then use border-bottom/top/left/right and set them to the color that you need.
Something like this: http://jsfiddle.net/delnolan/3jbtf9f1/
<style>
.angled-input{
border: none;
height: 50px;
float: left;
display:block;
}
input:focus{
outline: none;
}
.add-angle{
display: block;
float:left;
border-right:30px solid transparent;
border-bottom: 50px solid #ffffff;
}
</style>
<form>
<input class="angled-input"/><span class="add-angle"></span>
</form>
I'm building a calendar, and this is what I'm after:
http://postimg.org/image/vpd10bkqt/
So basically I want to show all the events as a small rectangle inside the
appropriate day's big rectangle.
The difficulty is the first element should be shown at the bottom right corner,
and should be filling form right to left and bottom to top.
I think the simplest solution would be if a rectangle would be a
span element with a solid border around it, and it contains a dot as text.
Here is a jsfiddle demo:
http://jsfiddle.net/jv392gmv/
CSS:
section#calendar {
width: 970px;
}
time {
display: inline-block;
width: 120px;
height: 120px;
margin: 4px;
text-align: right;
font-size: x-large;
font-weight: 900;
border: 1px solid #c3c7c7;
border-radius: 5px;
background: #fff;
}
time.notmonth {
background: #777;
}
section#calendar h1 {
text-align: center;
}
section#calendar time a {
display: inline-block;
width: 110px;
height: 110px;
margin: 5px 5px 0 0;
padding: 3px 3px 0 0;
color: #f55b2c;
text-decoration: none;
}
section#calendar time a:hover {
color: #000;
}
span.event {
top: 10%;
left: 7px;
position: relative;
border-color: #222;
border-style: solid;
border-radius: 5px;
border-width: 5px;
}
HTML:
<section id="calendar">
<h1>
←
July 2015
→
</h1>
<time datetime="2011-05-29">
29
<!-- <span class="event">.</span> -->
</time>
</section>
Anyone has any idea how to achieve it?
The original time tag idea came from here:
http://thenewcode.com/355/HTML5-Calendar-With-CSS3-and-Microdata
In the container, set a rotation of 180 deg.
In the children, rotate again to get them upright
.base {
width: 140px;
height: 140px;
border: solid 1px black;
position: relative;
}
.test {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
transform: rotate(180deg);
}
.children {
width: 40px;
height: 40px;
background-color: lightblue;
transform: rotate(180deg);
display: inline-block;
margin: 2px;
}
<div class="base">
<div >123</div>
<div class="test">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
<div class="children">5</div>
<div class="children">6</div>
<div class="children">7</div>
</div>
</div>