I would like to draw a plane with pure html and css.
My current basement is this:
http://jsfiddle.net/SchweizerSchoggi/rq2ukwfk/
<div id="plane"></div>
#plane {
height: 100px;
background-color: #ccc;
border: solid 1px #000;
border-radius: 120px 0 0 120px;
}
I would like to have the "cockpit" on the left side more elliptical, not round.
Is there a chance to realize this?
Thanks for any help!
to get it more elliptical you could use:
border-radius: 50% 0 0 50%;
http://jsfiddle.net/rq2ukwfk/1/
You can do that in pure html and css but you will need more div elements. like something like this:
<div id="plane">
<div id="cockpit-window"></div>
<div id="left-wing"></div>
<div id="right-wing"></div>
<div id="tail"></div>
</div>
Some inspiration for you:
http://codepen.io/davidicus/pen/dDAqC
http://codepen.io/HugoGroutel/pen/dJniD
Related
I dont know what title to give for this question. Got from my designer this image:
How can i make something like this?
Like you see there is button in midle who needs to be clickable and background transparent. Around button you see red full width parent. Maybe my approach is not good maybe it can be done with pseudo elements but i dont know how.
Pls help me...
This is my html code:
<div class="pdf">
<div class="pdf-container">
<h3>Rádi byste s námi spolupracovali? Představíme Vám své další výrobky v našem katalogu.</h3>
stáhnout katalog
</div>
</div>
Support isn't fantastic, but mix-blend-mode is the easiest way to achieve your desired look.
.pdf {
background: url('https://media.istockphoto.com/vectors/gear-wheel-vector-rendering-of-3d-wireframe-style-3d-view-layers-of-vector-id1003526726') 50% 10% no-repeat;
text-align: center;
}
.nav {
height: 60px;
background-color: #313131;
mix-blend-mode: multiply;
}
.pdf-container {
padding: 30px;
background-color: red;
mix-blend-mode: multiply;
}
.pdfbutton{
background: white;
border-radius: 20px;
display: inline-block;
padding: 10px 20px;;
}
<div class="pdf">
<div class="nav"></div>
<div class="pdf-container">
<h3>Rádi byste s námi spolupracovali? Představíme Vám své další výrobky v našem katalogu.</h3>
stáhnout katalog
</div>
</div>
I'm doing some formatting on a webpage and I'm wondering if it's possible to save a chunk of html code as a class and reuse it.
For example:
I want to change this -
<div>
<hr>
<p>Item 1</p>
<a href="oh.jpg" />
<hr>
</div>
<div>
<hr>
<p>Apple</p>
<hr>
</div>
To this -
<div class="section">
<p>Item 1</p>
<a href="oh.jpg" />
</div>
<div class="section">
<p>Apple</p>
</div>
With the same end result of being contained within two horizontal rules.
Is there a way of making a class that isn't just for styling but contains HTML code as well?
The closest thing to what you're describing is the CSS pseudo-elements :before and :after. You can't insert HTML, but you can insert text or images, or a simple rectangle with content:"";display:block;. With some creativity you can pull off a lot of effects with just CSS.
So while you can't insert an actual <hr> with CSS, you can psuedo-elements to draw one with whatever styles you please:
.section:before {
content: "";
display: block;
height: 2px;
border: 1px inset #000;
border-width:1px 1px 0 0;
}
.section:after {
content: "";
display: block;
height: 2px;
border: 1px inset #000;
border-width:1px 1px 0 0;
}
If you absolutely need to add HTML, you can use Javascript to find all elements with class .section and append child elements.
you can use CSS
.section{
width : 100%;
border-bottom: 2px solid #ccc;
margin-top : 5px;
}
Here is fiddle example: example
Question1: I have a flowing arrow triangle css:
.wrapper {
background-color: black;
width: 100px;
height: 100px;
}
.downArror {
float: left;
display: inline-block;
border: 15px solid rgba(0, 0, 0, 0);
border-bottom-color: #fff;
margin: 8px;
}
HTML:
<div class="wrapper"><div class="downArror"></div></div>
Just wondering, is there a way to change the css that make this triangle to a '^' shape?
what I'd like to have is something like this:
Question2:
Is there a way to make a tick like this using code?:
I am currently using √ but, the shape is slightly different
I actually created this effect awhile back for a menu. You can find it here:
http://codepen.io/spikeyty/pen/IFBro
Basically, I took a transparent div, added bottom-left and bottom-right borders, and then rotated the div 45deg using transform. For extra sweetness the example has a neat hover effect. Enjoy!
It's possible using css : (Hope you meant this)
.wrapper{
background-color:black;
width:20px;
height:20px;
text-align:center;
}
.downArror_black:before{
content:'\2227';
color:#fff;
}
.tick:before{
content:'\2713';
color:#fff;
}
<div class="wrapper">
<div class="downArror_black"></div>
</div>
<br />
<div class="wrapper">
<div class="tick"></div>
</div>
http://jsfiddle.net/adamadam123/qv2yR/
Above is the code I'm currently working with. Below is an image of what I'm trying to achieve.
Its basically a chat box 'IM' and I have a blue & pink image and need to be able to get different amounts of text to sit within the image.
I also tried using the image as CSS background but found it didn't stretch to fit the text. Also tried floating and absolute positioning.
Any help would be greatly appreciated.
thx
<div class="chatMessengerBody">
<div class="chatMessengerChatBubble chatMessengerChatBubbleBlueWrapper">
<img src="images/chat-messenger-chat-bubble-blue.png" class="chatMessengerChatBubble chatMessengerChatBubbleBlue"/>
<p class="chatMessengerChatBubbleContent">Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
</p>
</div>
<div class="chatMessengerChatBubble chatMessengerChatBubblePinkWrapper">
<img src="images/chat-messenger-chat-bubble-pink.png" class="chatMessengerChatBubble chatMessengerChatBubblePink"/>
<p class="chatMessengerChatBubbleContent">Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?</p>
</div>
</div>
http://jsfiddle.net/qv2yR/10/
CSS
.blue {
background: #EBF7FF;
border: 1px solid #D4F1FD;
-webkit-border-radius: 5px;
border-radius: 5px;
color :#6B95B0;
margin-bottom: 5px;
padding: 5px;
width: 200px;
}
.pink {
background: #FFF8F2;
border: 1px solid #FFEEE4;
-webkit-border-radius: 5px;
border-radius: 5px;
color :#D386A8;
margin-bottom: 5px;
padding: 5px;
width: 200px;
}
HTML
<div class="blue">
this is the blue one
</div>
<div class="pink">
this is the pink one.
</div>
Instead of an image, why not use some CSS & CSS3 rounded corners:
.chatMessengerChatBubblePinkWrapper {
background:#fff8f2;
border:1px solid #ffeadb;
-webkit-border-radius: 5px;
border-radius:5px;
}
Hi all !
I want to create a small round static percent indicator in CSS but I can't find the solution.
The squared indicator at left is ok, but so ugly, I want it round !
I have tried with rounded corner (cf indicators at the right of the screenshot), and I wonder if there is possibility to add a rounded mask to hide the corners (cf. css3 mask : http://webkit.org/blog/181/css-masks/), but it seems like it's only for img...
The solution can works only on webkit browsers, because it's for a mobile webapp.
Here is my code to create the (ugly) indicator in the image above :
<div class="meter-wrap">
<div class="meter-value" style="background-color: #489d41; width: 70%;">
<div class="meter-text"> 70 % </div>
</div>
</div>
And the css :
.meter-wrap{
position: relative;
}
.meter-value {
background-color: #489d41;
}
.meter-wrap, .meter-value, .meter-text {
width: 30px; height: 30px;
/* Attempt to round the corner : (indicators at the right of the screenshot)
-webkit-border-radius : 15px;*/
}
.meter-wrap, .meter-value {
background: #bdbdbd top left no-repeat;
}
.meter-text {
position: absolute;
top:0; left:0;
padding-top: 2px;
color: #000;
text-align: center;
width: 100%;
font-size: 40%;
text-shadow: #fffeff 1px 1px 0;
}
Add a wrapper around your .meter-value class, set its overflow to hidden and then set the width of that layer to get the desired effect. The rounded corners on the .meter-value class should remain intact and give you a nice fluid progress indicator.
You will have to move the .meter-text div outside of the wrapper to ensure it's visible throughout the transition, so your html would like something like:
<div class="meter-wrap">
<div class="meter-text"> 70 % </div>
<div class="meter-value-wrapper" style="width:70%;">
<div class="meter-value" style="background-color: #489d41;">
</div>
</div>
And the class for .meter-value-wrapper might look like:
.meter-value-wrapper {
overflow: hidden;
width: 30px;
height: 30px;
}