What is Reddit's opinion of
CssDeck?
From 3.5 billion Reddit comments
39 reviews of this app found across Reddit:
Ah I see, z-index issue.
If you match the container z-index to that of the shadows, it works fine:
http://cssdeck.com/labs/mc54ejog
Notice .container now has:
position: relative; z-index: -1;
You can do this with pure html/css (with css columns), the browser support just sucks. Compared to the jQuery that is.
edit: btw, there are many like masonry, I think that's just the most famous one.
This is as close as I could get
I had to use an extra child element because I needed a outer div to hide the overflow, otherwise it cause a horizontal scroll to appear. To get the child to go offscreen to the left, I combined it with translateX to get it completely offscreen before wrapping without going farther than necessary.
God forbid the day they deprecate <marquee>, but should such a dark day come, we have this solution.
If anyone can come up with a childless solution (without having to modify html or body), I'd love to see it.
I added the original marquee for comparison. Unfortunately I can't replicate the shakiness, which I assume is a feature to help attract the eye even more.
It’s not hard. HTML has a progress bar that is easy to use. I don’t know your skills but here is one with just CSS. You can search google for examples with js.
Each page would just get one with a different and higher/lower percentage number.
I prefer the layout of cssdeck.
Here's a reasonable example (make sure to press Play rather than just viewing the code).
Updated. Screenshot. Ping /u/snarky- and /u/worried19. It's still not necessarily the final version - I might make a fresh thread for everyone once I have that.
I cannot stop using this site for colors http://flatuicolors.com/.
Tips:
Use boots site on the web.trap for the grid, navbar, and container only because then your site ends up looking like every other
Subtle shadows really make things pop , but don't go crazy (example)
Use Nice fonts like Lato , helvetica neue, or open sans google fonts is your friend
Adding simple CSS3 animations goes a long way, same goes with js animations. It's the small things
I am the developer of this site and a co-founder of Hungry. MadCapitalist is correct on the basics. It is actually pretty simple and I have made a gist of the javascript if you would like to take a look (in the form of an AngularJS directive. https://gist.github.com/zacharyblank/653202a1498bbbdc096c.
It is based on this: http://cssdeck.com/labs/html5-canvas-particles-web-matrix
Surprisingly different techniques found in a quick search:
JS error.
>Webpage error details
Message: 'console' is undefined Line: 10996 Char: 3 Code: 0 URI: http://cssdeck.com/assets/js/build/labs/app-45cbd758fdaf27dd1238d36f03d3cf42.js
refresh and it works.
Here's a WIP HSTS/AAP variant.. You can click on the squares to mark them. Important to emphasize that it's very much not finished yet (it's missing HSTS spots and I haven't had Trent comment on it). If the link doesn't work properly, you can fill out this screenshot of it instead.
You want to mix alternate and standard styles, right? Well, in CSS you can't select single letters inside an element (h1 in your case), but you can achieve your goal with what someone call "span-hell": since you can only target elements with CSS, you want to add spans inside your h1 so you can style those while preserving the rest of the text style. Beware that if you go that way you're sacrificing (and screwing up) your page semantics. Here's a little demo!
> http://cssdeck.com/labs/ldmtsmfk
Here's the concept you're looking for, if it absolutely has to be circular, look into W3 Schools rounded buttons to give you a better idea of how to modify the CSS to your needs.
You need a spritesheet with all the frames of the animation in sequence, then you can step through them to make it appear like a gif, like this.
The mandatory no-jQuery solution.
Technically, it is possible to do this with just CSS. You'd have to semantically group the buttons with their associated content boxes, then use a pseudo-selector to expand the contents for the button that was last clicked. I wouldn't recommend this route though...
> ...what fine art designers say to graphic artists...
With art, the artist can make choices in a vacuum and it is still considered art. There are no strict guidelines nor best practises in art.
However, this is /r/web_design, not /r/web_art. As a designer, you are responsible for more than just the visual aesthetics of a website.
Factors such as usability, page load speed, code maintainability, legibility for future developers etc. are part of a web designer's job.
WYSIWYG editors are notorious for generating crappy and human-illegible code. I haven't studied Webflow in detail, so I don't know if this applies to it, but I have to say I'm a bit sceptical.
Of course, writing plain old HTML and CSS can be slow and rigid. I've found a nice middle ground with Jade and Compass. Development is fast, the code is cleaner (both visually and structurally) and they fit my workflow perfectly: I often start sketching things with CSSdeck (supports Jade and Compass, works anywhere, automagic page refresh). When I'm done with the basics I can just copy paste the code into my node.js boilerplate and start building the more intricate details there.
u can easily modify chrome-scrollbars with css3
http://www.ourtuts.com/how-to-customize-browser-scrollbars-using-css3/ And here some more examples:
If you're willing to get your hands dirty and want to make your site very efficient, you can try writing this in vanilla js/css/html, especially with so little going on on that site. Here's my try at the icon hover. However, if this is a one-off kinda thing or you don't want to go through a bunch of documentation, use the jquery resources mentioned in this thread.
"Save + refresh" can be reduced to "Save" with live.js.
If that's not direct enough, cssdeck will refresh the view whenever you stop typing for a second, thus "Save + refresh" is reduced to "".
Don't get me wrong, I saw Bret's speech a year ago and I think he is spot on. The world just hasn't catched up yet, so we have to work with what we got.
It depends what's in the content box for me. For 1-liners I will simply set the line-height to the same value as the height. You can also use this with multiple lines by dividing your height by your # of lines and using that as your line-height.
That's weird, I was about to praise you but then I tried testing it out and it won't work when I try to use the code from your Codepen page. I even tried using the same code in this editor, it doesn't work:
​
It's great you managed to fix it but somewhere something is going wrong, can you see what it is?
Pretty sure OP googled first before she posted here, based off the screenshot she posted.
Andrea try this: http://cssdeck.com/labs/another-simple-css3-dropdown-menu
Then I believe you just need to change it to display: inline instead of dropping down, but I could be wrong. Someone is welcome to correct me if I am.
edit: jk I am wrong.
Hey omg! That looks so similar to my canvas pic! I made my pic using canvas and then edited it using this website canva.com. You can see some of my very noobish work here http://codepen.io/aqilahmisuary/ but yeah so sorry I didn't steal your pic, all the pics on the github blog are either stock pics or our own. However your stuff are pretty amazing! You should make tutorials! =)
I've just been following this tutorial http://cssdeck.com/labs/lets-make-a-bouncing-ball-in-html5-canvas and then experimenting with the code.
The colors are pretty rough, the button would look better with a sans-serif font as opposed to serif, the border is too large, and the button text isn't centered. I'm not a fan of the current one. You could also do some cool stuff with CSS to make it 'clickable' like this. I would caution against the current banner. Who's doing your CSS?
Hey /u/bleakmidwinter,
If you intend to do this with only CSS I think the best option would be to create a tabbed-layout, one tab for "Fall" and one tab for "Combined".
Here's a demo I threw together based on the example above, is this along the lines of what you mean?
Hope that helps.
If this is seriously your strategy, you don't deserve any SEO boost for that content. If you don't value it, why should Google?
Anyway, as an alternative to using a text area (which is semantically wrong), try using a Pure CSS read more solution to display content at it's full length.
Basically wrap your text that you deem excessive in another tag (div, span labelled 'more'. Perhaps make this an separate field in your CMS) so it will display in full. Here is an example via CSS Deck.
I would personally wrap the extra text in an <aside> since it does not justify being labelled in the article body.
You usually require some javascript components to create an accordion. Just writing markup will not create an accordion.
Alternatively you could employ a method like this http://cssdeck.com/labs/accordion-without-javascript
Great advice. Check out these free programming books on Github. You can use sandboxes such as cssdeck to help visualize your code. I'm personally very fond of Sublime Text for writing.
For minimal JS usage, you could do something like this:
/* HTML: */ <input type="text" class="promobox" onkeyup="this.setAttribute('value', this.value);" />
/* CSS: */ .promobox { color: #800; } .promobox[value="student"] { color: #080; }
Thing is, people can easily find out all available promo codes by viewing the source. If this is a problem, you'll have to check the code server-side.
Well first problem is going to be the fact your submenus aren't the children of a LI.
Look at this example and note how the HTML is structured : http://cssdeck.com/labs/another-simple-css3-dropdown-menu
This selector will never trigger : .link:hover ul
There is no child UL of the link class. Can verify it with this pen : http://codepen.io/Mwins/pen/OPYeoQ
Ok, it isn't fixed on FF. I'll tell you how to clear the text though. Apply a class to the div containing it with a ruleset of clear:both; or use add attribute style="clear:both;" like is done in the provided code.
The code your friend supplied looks to be older. There's better ways of doing this.
http://cssdeck.com/labs/another-simple-css3-dropdown-menu
http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
Translation engines probably have no common standards, so it'll have to be a hack.
You could, for example, add zero-width joiners between the letters of the words you with to keep untranslated. Or perhaps you could do something like this (not perfect; if the translated word is wider or thinner than the original, word spacing will go weird).
EDIT: okay, I think I got it working with JS. I updated the above example. Basically, I'm replacing the content of all elements which have the attribute "data-jsnotranslate" with said attribute's value. This should override most translation services.
If you want to make a form that passes a word to another page, and then bounces the word around in a box, this tutorial would give you collision detection and bouncing: http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
As far as the Youtube thing goes, I'm not clear on what you mean. Do you mean that your webpage generates a movie file?
Had trouble connecting to Destiny yesterday, so I messed around a little http://cssdeck.com/labs/eemlhza8
It's kind of slapdash, and I haven't found a good image of Xander 99-40 yet. In a perfect world, his image would have some parallax applied to it when you scroll. The CSS isn't super clean and orderly. But there it is. Ignore it if you like. I just haven't gotten to code in a while and it was fun.
Thanks, this plugin is very useful. Basically, this on one side showing code, and on the other side, it shows the output of the HTML.
Eg: $('div').css('color', 'red') would make my div red on the other panel. Similar to how codecast is setup...
Hit play on the bottom right..
http://cssdeck.com/labs/codecast-single-element-pure-css-macbook-pro
Alternatively, (and most likely to give you the best results imo ) you can use CSS3 step animation and PNGs.
Trask-Industries (a pseudo site for the new x-men movie) uses this method. Take note of the animated icon on the left. They do this by animating the background position and creating a background image with each frame (or step) of the animation.
Tutorial/Demo: CSS Image Sprite Animations With steps() Function
JSfiddle (or cssdeck, which I personally prefer) is pretty much the tool you're looking for, you just seem to misunderstand the results-area.
Such online scratchpads are meant to execute JS in the context of your HTML document. The results-area is the combined results of html, css and js, which is why entering only js will probably not make any visible changes in the results-area.
The simplest way to make jsfiddle or others work with JS is to call document.write() instead of console.log(). document.write() will output it's parameters directly to the HTML instead of the JS virtual machine's console.
Then again, you could also open the developer tools console of your chosen browser (press F12), to which any console.log() calls will be output, with the added benefit of easier error and variable inspection.
Codeacademy may sometimes output the return value of a function to it's virtual console as well. Developer tools' console does this when you write code directly into it, but you can replicate this in jsfiddle by calling your function within console.log() or document.write().
For example, instead of running your function with:
myCoolFunction("foo", "bar");
you would type:
console.log(myCoolFunction("foo", "bar"));
And finally, there's nothing stopping you from just using Sublime Text offline. Unless you're dealing with xhr-requests, you don't need a server. You just need a html-file which calls your JS-file. Edit the js, open the html in your browser and the js will be executed. To further streamline this kind of a development environment, you could download live.js*, which will automagically reload your document when you change it, it's css or js!
^(* looks like livejs.com is having technical difficulties right now... If that's still the case when you're reading this, go ahead and get the live.js script from here: https://gist.github.com/thykka/9727654 .)
I missed the point where you get awesome performance gains because you dropped out of the pointless gimmick arms race.
The post for this monstrosity floated right to the top here. Stopping that from happening removes a huge performance hit.