CSS to create a outline transition from right to left? [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have one search field. When click on on that field (focused), it should provide solid blue colored outline and while forming this outline, it should transition from right to left as provided in the image.

I've made a solution that uses a little more HTML...
.text-input {
margin: 3px;
width: 200px;
}
.parent-border{
background-color: blue;
width: 215px;
border-radius: 6px;
}
.border {
background-color: white;
width: 100%;
transition: 0.5s;
border-radius: 5px;
}
.border:focus-within{
width: 0%;
}
*:focus {
outline: none;
}
<div class="parent-border">
<div class="border">
<input class="text-input"></input>
</div>
</div>

Related

How can I make a so-called mask out of a div [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
How can I make a so-called mask out of a div. Hello I am looking for a solution to my problem and would be very grateful if someone could help me. I want you to see a background only through a div. If someone could help me I would be very grateful. Thanks a lot. Alex.
I think you are looking for something like this. Set the background div with an image then make the background color of the divs on top of it white, with only 1 of the divs not having a background set, allowing you to look through it.
Here is an example in JSfiddle https://jsfiddle.net/9yL1p2oq/
HTML
<body>
<div class="background">
<div class="toparea"></div>
<div class="left"></div>
<div class="window"></div>
<div class="right"></div>
<div class="bottomarea"></div>
</div>
</body>
CSS
body {
margin: 0;
}
.background {
background-image: url('https://i.pinimg.com/originals/99/bb/69/99bb69e4680b0bc9c4c806f5f0f87ad5.png');
background-attachment: fixed;
float: left;
width: 100%;
height: 800px;
}
.toparea, .left, .right, .bottomarea {
background: #fff;
}
.toparea, .bottomarea {
float: left;
width: 100%;
height: 350px;
}
.left, .window, .right {
float: left;
width: 33.333%;
height: 350px;
}

How to make a wavy line from one element to other element [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I just want to know if its possible to make a wavy line from one element to another element that they looks connected because of the line? I wanted to look like this:
Pls check the image here
wavy line
The element in html will be this:
<style>
/** CSS style for the line here **/
</style>
<div class="row">
<div class="col-md-4"><img src="circle img"></div>
<div class="col-md-4"><img src="circle img"></div>
<div class="col-md-4"><img src="circle img"></div>
</div>
Here is a simple approach to do so in CSS:
.element {
height:100px;
width:100px;
border:2px solid black;
margin:-5px;
}
.holder {
/* Clip edges, as some of the lines don't terminate nicely. */
overflow: hidden;
position: relative;
width: 200px;
height: 50px;
}
.ellipse {
position: absolute;
background: radial-gradient(ellipse, transparent, transparent 7px, black 7px, black 10px, transparent 11px);
background-size: 36px 40px;
width: 200px;
height: 20px;
}
.ellipse2 {
top: 20px;
left: 18px;
background-position: 0px -20px;
}
<table><tr>
<td><div class="element">This element contains your HTML tags and stuff</div></td><td>
<div class="holder">
<div class="ellipse"></div>
<div class="ellipse ellipse2"></div>
</div></td><td>
<div class="element">This element contains your HTML tags and stuff</div></td>
I had to use HTML tables so that I could fit different Divs in same line. Using a table you can rotate the curved line and add it in any angle according to your needs. Using table saves you from very large and complex css styling.

How to make a progress bar with image [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm going to make a progress bar.
When it's 0%, you can't see anything. From 1%, I would like to put a flag on the progress bar and let you know how far it has progressed. At 100 percent, this flag disappears. This flag is in image form and I don't know how to code it. Progress is received in JavaScript. Should I write position:relative, position:absolute in the div container?
.progressbar {
width: 100%;
border: 1px solid black;
border-radius: 5px;
height: 24px;
}
.icon {
width: 24px;
height: 24px;
position: absolute;
right: -12px;
opacity: .5;
}
.progress {
width: 50%;
background-color: green;
position: relative;
height: 24px;
}
<div class="progressbar">
<div class="progress">
<img class="icon" src="https://loremicon.com/ngon/128/128/811932708408/jpg">
</div>
</div>
Here's the gist. Style as you please.

Logo Over Multiple Divs at once [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am creating a website and have designed the header
The Red and Blue is an image
The Yellow is a navigation bar
The circle is a logo
My issue is that I am unable to put the logo in div of the image and the nav div at the same time. Is this even possible or should I consider a new design. Perhaps I am looking at this incorrectly.
Your question is about having the same image on both the nav and that div.
Pen here!
You can do it easily with background-image and set the same image aswell.
background-image: url(http://s.glbimg.com/jo/g1/f/original/2016/05/02/palestinian-gaza-daily_life_mohammed_abed_afp.jpg);
background-size: cover;
backgroud-position: center center;
This can be achieved using pure CSS. This is a possible approach to get what you want:
#one {
height: 100px;
background-color: blue;
}
#two {
position: relative;
width: 50px;
height: 50px;
background-color: red;
border-radius: 100px;
transform: translateY(40px);
margin: 0 auto;
z-index: 1;
}
#three {
position: relative;
height: 30px;
background-color: yellow;
bottom: -20px;
}
<div id="one">
<div id="two">
</div>
<div id="three">
</div>
</div>
Replace divs with any block element and it should work too. Otherwise, you'll need to set display: block.

Create new tag for images in javascript [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I want add a new label for <img> html element like this:
Is there some JS plugin to do this o something similar in CSS ?
You can do something like this using css
#par {
position: relative;
}
#par img {
width: 200px;
height: 200px;
}
#tri {
left: 0;
top: 0;
position: absolute;
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
#tri:before {
content: 'New';
position: absolute;
left: 23px;
top: -68px;
transform: rotate(-45deg);
}
<div id="par">
<img src="https://pixabay.com/static/uploads/photo/2016/01/23/16/02/experimental-1157660_960_720.png" />
<div id="tri"></div>
</div>
For more css shapes take a look at here
I've not found plugins to do that, but you can do it from scratch, take a look at this tutorial http://www.inserthtml.com/2012/03/creating-css-image-ribbons/

Categories