I am trying to write up some CSS for a company logo that is a fairly accurate depiction of the jpg currently on the company server. its pretty basic except for some color overlays on the logo.
My question is:
is this even possible? if so how can i go about doing so
please dont bash, im a total noob, my first line of html was about a week ago...
Here is my markup
<html>
<head>
<meta charset="utf-8"/>
<title>
</title>
<link rel="stylesheet" href="css/stylesheet.css"
</head>
<style contenteditable="">
#infinity {
position: absolute;
width: 212px;
height: 100px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 15px solid;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:before{
color: #ADB2B3;
}
#infinity:after {
left: auto;
right: 15;
color: #A99055;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<body>
<br>
<br>
<div>
<div>
<div style="float:left; margin-right: 0px;"id="infinity">
</div>
<div>
<p style="float:left; margin-top:70px; margin-left:130px; font-size:60px;
font-family: Avenir, sans-serif;">
PORTFOLIO
</p>
</div>
</div>
</body>
</html>
Check this out: http://jsfiddle.net/tMEqk/1/
It's not quite there, but it's closer
I made a relatively positioned container and then drew out each loop from there, positioned everything according to the box. Changed the border to get the continuous effect and then obscured the diagonal line generated by a gold box. There's no rotation either, but if you want to change the size there's a little bit of math to be done. Did it in Chrome, haven't checked other browsers yet.
Edit
I'm not exactly condoning this, but I did enjoy trying to recreate it. This really should be an image, and you can prevent the broken image by saving and referencing it as a local file.
Just so I am straight. You are trying to create the entire logo with CSS? Is this correct? If so, why CSS versus using the JPEG? If you are using straight CSS you will be limited to what you can do, also most of it would be CSS3 and browser hacks, which poses a couple of problems.
The first being CSS3 is only supported in modern browsers.
The second being browser hacks don't pass W3 CSS validation.
This is not an answer, really, but I would strongly suggest that you can at most try to make a scalable vector image out of that logo, using Inkscape or such programs. This logo will be very easy to convert to SVG (scalable vector graphics). But as Kris said, using CSS to accomplish all of this may not perform as intended in many situations.
Related
I have been trying to use CSS to create a lifted corner effect for an image on a Foundation 6 website (fluid), and have been unable to get it functioning. I always end up with absolutely nothing. Changing the z-index property does nothing. I assume something in foundation may be interfering, but I am new to Foundation.
Ideally I would like to have a single class I could apply to any image of any size.
CSS
.shadowbox {
position: relative;
}
.shadowbox:before, .shadowbox:after {
z-index: -1;
position: absolute;
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.shadowbox:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
HTML:
<div class="medium-3 columns">
<div class="feature-section-column" data-equalizer-watch>
<div class="shadowbox">
<img src="assets/img/feature_img/stem_design.jpg" />
</div>
<p>STEM learning is everywhere and we help design and advance it. Our work includes the comprehensive design of STEM schools and the transformation of existing ones, strategic planning support to school districts and networks, and the creation of STEM learning experiences that range from curriculum-embedded capstones to aligning in- and out-of-school learning in the community.</p>
</div>
</div>
You have a number of issues. First, the main column is so big it pushes the :before and :after off the page.
I didn't have your image. But the text is probably should be in the .shadowbox as well.
We will want to limit the .shadowbox size down a bit so :After and :before (with width 50%) can fit. I reduced their widths.
<div class="medium-3 columns">
<div class="feature-section-column" data-equalizer-watch>
<div class="shadowbox">
<p>STEM learning is everywhere and we help design and advance it. Our work includes the comprehensive design of STEM schools and the transformation of existing ones, strategic planning support to school districts and networks, and the creation of STEM learning experiences that range from curriculum-embedded capstones to aligning in- and out-of-school learning in the community.</p>
</div>
</div>
</div>
Start with something more simple.
.shadowbox {
position: relative;
width:50%;
}
.shadowbox:before, .shadowbox:after {
content:'';
z-index: -1;
position: absolute;
bottom: 15px;
left: 10px;
width: 25%;
top: 80%;
box-shadow:0 20px 15px #777;
transform:rotate(-5deg);
}
.shadowbox:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
https://jsfiddle.net/61atov8w/2/#&togetherjs=oyEsIjJwpM
Pseudo-elements :before and :after need a content property to render to the screen.
Add content: ''; inside your .shadowbox:before, .shadowbox:after { } and then it should render.
See more on that here: Why do the :before and :after pseudo-elements require a 'content' property?
I am using zoom: 0.5; and it is working fine on my site, but when I add moz-transform: scale(0.5); and moz-transform-origin: 0 0; To make the site Firefox compatible, the fixed positioned elements I have become unfixed and not placed in the correct place (to the top and left of where they should be). The site works as intended in chrome, and this only happens in Firefox.
Here is the code
.mobPopUp{
position: fixed;
width: 500px;
height: 200px;
border: 5px solid black;
text-align: center;
font-size: 24px;
font-weight: 900px;
color: lime;
bottom: 0px;
text-shadow: 3px 3px black;
}
#mobPopUpBlue{
right: 0px;
background-color: blue;
}
html{
zoom:0.5;
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0
}
<div id="mobPopUpred" class="mobPopUp">Right click on a mob to see their stats here</div>
What am I doing wrong? And how can I have it so it works on Firefox as it does on Chrome with zoom
There isn't really a CSS zoom property, it's just a non-standard property invented by Internet Explorer and adopted by some other browsers for compatibility reasons. The correct property to use for scaling transformations is the transform property.
Firefox has long since remove the -moz- vendor prefix, and never implemented zoom, so that's probably why your code does nothing in Firefox, but for maxium browser support, you can use the below.
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
That will work in pretty much anything IE9 or better. If you need IE8 support, then you might try adding zoom in an IE <= 8 CSS hack.
I am trying to create a div to align with the bottom corner of a form input but with a triangular arrow pointing to the corner and merged into the box. I am having problems creating this as i am not a designer. Basically what i'm looking for is a kind of arrow that merges with the box (maybe like a speech bubble)
Anyway code so far:
html:
<div class="inputwrap">
<select id="gb_contact" name="gb_contact" class="dropdown-input" >
<option value="option">option</option>
</select>
<div class="tip">rrrrrrrrrrr</div>
</div>
css
.inputwrap{
position: relative;
display: inline-block;
min-width: 10%;
}
.tip:before {
position: absolute;
content: " ";
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 0 0;
border-color: #00FF00 transparent transparent transparent;
z-index: 100;
left: -0px;
top: -2px;
-ms-transform: rotate(5deg); /* IE 9 */
-webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
transform: rotate(5deg);
}
.tip {
position: absolute;
right: -190px;
background-color:#ff0000;
min-width:200px;
min-height: 50px;
margin-top:2px;
border-radius:5px;
}
can anyone help with this?
jsfiddle: http://jsfiddle.net/d30top88/
link to concept:
https://drive.google.com/file/d/0B9ZIIks7bG2QT2haMWZZcXM3ZWc/edit?usp=sharing
close enough i suppose :
http://jsfiddle.net/d30top88/4/
What do you mean with merged inside the box? Just adjusted your fiddle like that:
Arrow Demo
with some adjustments:
top: 12px;
-ms-transform: rotate(135deg); /* IE 9 */
-webkit-transform: rotate(135deg); /* Chrome, Safari, Opera */
transform: rotate(135deg);
So it the arrow is now pointed to the right and down in the div.
Update after image link was provided in question:
Arrow Demo 2
But based on the image maybe the arrow has not the appropriate shape to meet your requirements. There are some nice css arrow generators online, just google for "css arrow generator" as I don't want to promote a special one.
can be done a slice between two divs in CSS like the following photo ?
I tried to google it but didn't found anything usefull for my problem
Thanks !
I suggest you to do it with image .
But if you want to do with css , here is example ,
css
.parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg);
-moz-transform: skew(20deg); -o-transform: skew(20deg); background: red;
float:left;margin-left:18px;margin-right:8px;}
.parallelogram2 { width: 150px; height: 100px; -webkit-transform: skew(20deg);
-moz-transform: skew(20deg); -o-transform: skew(20deg); background: Black;float:left; }
html
<div class="parallelogram"></div>
<div class="parallelogram2"></div>
Fiddle example !
And you can check and learn how css shapes works here and here !
Good Luck !
Does anybody know if there's a double chevron symbol in unicode/HTML-space similar to the double guillemet represented by » (»)?
In other words, I'm trying to avoid using an image if I can get by with text, but I need something like this:
It's the double chevron I can't seem to figure out. Looks like graphics for me it is.
May be this site will help you http://shapecatcher.com/ , very useful!
︽ U+FE3D PRESENTATION FORM FOR VERTICAL LEFT DOUBLE ANGLE BRACKET
︾ U+FE3E PRESENTATION FORM FOR VERTICAL RIGHT DOUBLE ANGLE BRACKET
These require a Chinese or Japanese font though.
I can't give you the character entity that you want, but it's possible to effect an...alternative, and still not use images (though it does require that the text itself be wrapped in an element, in this case span):
<span class="shadowed">^</span>
<span class="rotated">»</span>
CSS:
span { /* this is all, pretty much, just for the aesthetics, and to be adapted */
margin: 0 auto 1em auto;
font-family: Helvetica, Calibri, Arial, sans-serif;
font-size: 2em;
font-weight: bold;
color: #000;
background-color: #ffa;
display: block;
width: 2em;
height: 2em;
line-height: 2em;
border-radius: 0.5em;
text-align: center;
}
span.shadowed {
text-shadow: 0 0.5em 0 #000;
}
span.rotated {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
JS Fiddle demo.
The above span.rotated section, for IE < 10 compatibility (using filters, whereas IE 10 (or possibly 9) would/should use the -ms-transform or, simply, transform CSS3), using a filter approach:
span.rotated {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
/* IE < 10 follows */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
JS Fiddle demo (works in IE 7/XP, other versions I'm unable to test).
There's a problem with rotation. If you apply rotation(90deg) and rotation(-90deg) to two separate » you'll see that their position changes. A hacky way to fix it is to apply direction: rtl like this:
http://codepen.io/tomasz86/pen/lmCaL