|
|
| Page 1 of 1 |
|
|
 Posted: Mon, 17th Mar 2014 15:05 Post subject: box |
|
 |
Client wants a bunch of boxes. I made them, but they are made from images. He wants code based. What I cant make is a hover enabled simple html box with a link. It should look like this:
|
|
| Back to top |
|
|
|
|
| Posted: Mon, 17th Mar 2014 15:51 Post subject: |
|
|
HTML:
<a class="boxlink" href="target.html"><img src="https://www.google.de/images/srpr/logo11w.png"/><div class="descriptor">TEXT</div></a>
CSS:
a.boxlink {
display: inline-block;
text-decoration: none;
background: #edc;
padding: 4px 4px 2px 4px;
border: 1px solid #dcb;
border-radius: 4px;
}
a.boxlink > div.descriptor {
text-align: center;
color: #444;
font-family: arial;
margin-top: 10px;
}
a.boxlink:hover {
background: #fff;
}
a.boxlink:hover > div.descriptor {
color: #222;
}
Fiddle:
http://jsfiddle.net/7NaRj/
|
|
| Back to top |
|
|
|
|
| Posted: Mon, 17th Mar 2014 16:07 Post subject: |
|
|
Must be pure html, no css and no js. 
|
|
| Back to top |
|
|
|
|
| Posted: Mon, 17th Mar 2014 16:09 Post subject: |
|
|
Ehm that is pure html and why no css?!!?
|
|
| Back to top |
|
|
|
|
|
| Back to top |
|
|
|
|
| Posted: Mon, 17th Mar 2014 16:31 Post subject: |
|
|
ahahahahah dude that tool is shit! Every shape you create will have inline css? 
Learn to do that shit yourself, it will save you time, lots of time... and brain matter in the long run:
http://www.webplatform.org/
https://developer.mozilla.org/en-US/docs/Web
BTW, the code I provided gives you all that you need, there is no other css required, the class handles everything.
|
|
| Back to top |
|
|
|
|
| Posted: Mon, 17th Mar 2014 16:43 Post subject: |
|
|
I didnt say I use it, I said it kind of works, but useless. As for your code, it doesnt work on plugin.
|
|
| Back to top |
|
|
|
|
| Posted: Mon, 17th Mar 2014 20:13 Post subject: |
|
|
|
|
|
| Back to top |
|
|
|
|
|
| Back to top |
|
|
|
|
| Posted: Mon, 17th Mar 2014 21:20 Post subject: |
|
|
I made the box in Adobe flash cs6 and used Google Swiffy to convert to html, it kind of works, but it messes with my site footer and all.
Here is the result:
https://swiffypreviews.googleusercontent.com/view/o/e2878e59-83dd-4b50-ac47-31ec17182b27/dezute.html
Help me clean it so it does not mess the site.
Swiffy expires in 15 mins so here is the code:
| Code: |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Swiffy output</title>
<script src="https://www.gstatic.com/swiffy/v6.0/runtime.js"></script>
<script>
swiffyobject = {"internedStrings":["5536F558G360h5536F::"],"tags":[{"bounds":[{"ymin":-2099,"ymax":2099,"xmin":-1898,"xmax":1899}],"id":1,"fillstyles":[{"transform":["#0"],"type":2,"gradient":{"stops":[{"color":[-1519690],"offset":[0]},{"color":[15257526],"offset":[255]}]}}],"paths":[{"fill":0,"data":[":73q90Ta545C:b7K:7K7ka:946cb:7k7k7ka545c:b7k:7k7Ka:946Cb:7K7K7Kc"],"line":0}],"linestyles":[{"color":[16737792],"width":[19]}],"type":1},{"bounds":[{"ymin":-2109,"ymax":2109,"xmin":-1908,"xmax":1909}],"id":2,"fillstyles":[{"transform":["#0"],"type":2,"gradient":{"stops":[{"color":[-1],"offset":[0]},{"color":[16777215],"offset":[255]}]}},{"transform":["5536F634G436h5536Fb:"],"type":2,"gradient":{"stops":[{"color":[-1519690],"offset":[0]},{"color":[15257526],"offset":[255]}]}}],"paths":[{"fill":0,"data":[":72Q71Tb8I:8I8ia:946cb:8i8i8ia545c:b8i:8i8Ia:946Cb:8I8I8Ic"]},{"fill":1,"data":[":73q71Tb8i:8i8ia:946cb:8i8I8ia545C:b8I:8I8Ia:946Cb:8I8i8Ic::8Cb6M:6M6ma:946cb:6m6m6ma545c:b6m:6m6Ma:946Cb:6M6M6Mc"]}],"flat":true,"type":1},{"id":3,"records":[{"id":1,"transform":"::::::","states":1,"depth":1},{"id":2,"transform":"::::::","states":14,"depth":1}],"type":10},{"id":3,"matrix":"76F::90F90r90t","type":3,"depth":1},{"type":2}],"fileSize":856,"v":"6.0.0","backgroundColor":-1,"frameSize":{"ymin":0,"ymax":4180,"xmin":0,"xmax":3780},"frameCount":1,"frameRate":24,"version":15};
</script>
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">
<div id="swiffycontainer" style="width: 189px; height: 209px">
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject);
stage.start();
</script>
</body>
</html>
|
|
|
| Back to top |
|
|
|
|
| Posted: Tue, 18th Mar 2014 07:54 Post subject: |
|
|
Yeah... no JS and then a ton of code garbage... dude, what do you want and what do you need that layerslider plugin for that you are talking of?
|
|
| Back to top |
|
|
|
|
| Posted: Tue, 18th Mar 2014 12:23 Post subject: |
|
|
Layerslider is a slider plugin, but also can be used for many things. It also supports responsive mode, one can put animations in header, footer and widgets, its awesome. I need somehow to clean this code
|
|
| Back to top |
|
|
|
|
| Posted: Tue, 18th Mar 2014 12:46 Post subject: |
|
|
Last edited by Interinactive on Tue, 5th Oct 2021 02:23; edited 1 time in total
|
|
| Back to top |
|
|
|
|
| Posted: Tue, 18th Mar 2014 13:06 Post subject: |
|
|
Well, swiffy works and i explained. Ls is a wp plugin and its the most advanced one and easy to use. The site works and all i need is to fix these godamn boxes. Problem is parts of this swiffy code interferes with the wp site. Interinactive, you dont need that link, the code is posted here at 20:20
|
|
| Back to top |
|
|
|
|
| Posted: Tue, 18th Mar 2014 13:42 Post subject: |
|
|
God, you people are so slow. I did this myself. Here is the code that doesnt interfere with the site:
| Code: |
<script src="https://www.gstatic.com/swiffy/v6.0/runtime.js"></script>
<script>
swiffyobject = {"internedStrings":["5536F558G360h5536F::"],"tags":[{"bounds":[{"ymin":-2099,"ymax":2099,"xmin":-1898,"xmax":1899}],"id":1,"fillstyles":[{"transform":["#0"],"type":2,"gradient":{"stops":[{"color":[-1519690],"offset":[0]},{"color":[15257526],"offset":[255]}]}}],"paths":[{"fill":0,"data":[":73q90Ta545C:b7K:7K7ka:946cb:7k7k7ka545c:b7k:7k7Ka:946Cb:7K7K7Kc"],"line":0}],"linestyles":[{"color":[16737792],"width":[19]}],"type":1},{"bounds":[{"ymin":-2109,"ymax":2109,"xmin":-1908,"xmax":1909}],"id":2,"fillstyles":[{"transform":["#0"],"type":2,"gradient":{"stops":[{"color":[-1],"offset":[0]},{"color":[16777215],"offset":[255]}]}},{"transform":["5536F634G436h5536Fb:"],"type":2,"gradient":{"stops":[{"color":[-1519690],"offset":[0]},{"color":[15257526],"offset":[255]}]}}],"paths":[{"fill":0,"data":[":72Q71Tb8I:8I8ia:946cb:8i8i8ia545c:b8i:8i8Ia:946Cb:8I8I8Ic"]},{"fill":1,"data":[":73q71Tb8i:8i8ia:946cb:8i8I8ia545C:b8I:8I8Ia:946Cb:8I8i8Ic::8Cb6M:6M6ma:946cb:6m6m6ma545c:b6m:6m6Ma:946Cb:6M6M6Mc"]}],"flat":true,"type":1},{"id":3,"records":[{"id":1,"transform":"::::::","states":1,"depth":1},{"id":2,"transform":"::::::","states":14,"depth":1}],"type":10},{"id":3,"matrix":"76F::90F90r90t","type":3,"depth":1},{"type":2}],"fileSize":856,"v":"6.0.0","backgroundColor":-1,"frameSize":{"ymin":0,"ymax":4180,"xmin":0,"xmax":3780},"frameCount":1,"frameRate":24,"version":15};
</script>
<div id="swiffycontainer" style="width: 189px; height: 209px">
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject);
stage.start();
</script>
|
Now whats left is the background. I need to make it transparent. How do I do that? I assume this is the line:
"backgroundColor":-1,
|
|
| Back to top |
|
|
|
|
| Posted: Tue, 18th Mar 2014 14:37 Post subject: |
|
|
Sorry, I was waiting for the money to arrive, so that I can start worki ... jeeeeeeeeeeeeeezzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
background:transparent will make a background transparent, but I wouldn't know what your shit code their expects as input 
|
|
| Back to top |
|
|
|
|
| Posted: Tue, 18th Mar 2014 15:00 Post subject: |
|
|
Its not a 'shit code'. It works and I like that I can export it from Flash, because I know that software very well. If you dont know the answer please dont post.
|
|
| Back to top |
|
|
|
|
| Posted: Tue, 18th Mar 2014 15:05 Post subject: |
|
|
stage.setBackground(null);
works 
edit: damn, it doesnt work when I apply on more than one box. 
|
|
| Back to top |
|
|
|
|
| Posted: Tue, 18th Mar 2014 20:46 Post subject: |
|
|
yay fixed everything. Site's complete, goddamn took me too long. 
|
|
| Back to top |
|
|
|
|
|
| Back to top |
|
|
|
|
| Posted: Tue, 18th Mar 2014 21:44 Post subject: |
|
|
I'll disable that bitch 
|
|
| Back to top |
|
|
| Page 1 of 1 |
All times are GMT + 1 Hour |
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
Powered by phpBB 2.0.8 © 2001, 2002 phpBB Group
|
|
 |
|
