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 7 years ago.
Improve this question
I want to add game like effects to a web app to make it more interactive and fun for the user. Specifically, when someone fills out an answer, I want to have a little character that does a dance, or gold coins pop out - something similar to what you would see in a game.
What is the best way to do this? I'm a little confused on if this is possible through HTML5, or if I still need to work with Flash, or what. I'm not sure of the terminology to use to search for the answer, and so far I've found CSS3 animations and HTML5 vector animations but these aren't exactly what I'm looking for.
I would appreciate any insight, even on just what terms to search for!
Thanks,
Heather
You have many options:
CSS: check this animations effects, and use them wherever you want: https://daneden.github.io/animate.css/
Do not only use them: analyze each animation and learn how do they work. As you see CSS can be quite powerful on animation and does not need much memory to run (important for mobile devices)
jQuery: Once you have get familiar with CSS animations and possibilities, check all the .animation method posibilities from jQuery docs
Its a good way to start.
About very specific and complex things like advanced text animations, I suggest you to search for specific plugins created right for those pruposes. For example, Textillate for text animations, WaitMe for load animations or PACE for loading effects and loading processes.
To finish with, sources like Tympanus are great not ony on downloadable CSS and jQuery code for, for example, button effets, but also as a inspirational source.
Have fun, and always try to inspire yourself, and learn required knowledgements to develop your own effects before copying code.
Related
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 6 years ago.
Improve this question
I was able to create a web site 10 years ago with Microsoft Frontpage without learning anything, today with a copy of Adobe Dreamweaver CS6, I can't even figure out a way to change the font size of a simple text. CSS is the thing, so I went through the CSS tutorials in w3 and I get it now. It's a good idea, but It is also a good idea to kill creativity, ie all sites like similar, see screenshot below. It sucks floppy disks.
My questions will be:
Does web 2.0 really kill creativity?
Is there a "modern" web design application that I don't need to go into these CSS thing?
Is there a way to create a circular navigation menu like this using css? I want to have this menu in the middle of the page, and with a button on the corner to activate it.
No it doesn't
You don't have to use CSS. You can use inline styles,
but it won't be right. Using the CSS is a good coding practice and
you just need to learn it better.
Yes. If you google it, you'll find several links. Here is just some examples:
https://css-tricks.com/building-a-circular-navigation-with-css-clip-paths/
http://www.cssscript.com/pure-css-circle-menu-with-css3-transitions-transforms/
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I am currently new to HTML and CSS. I completed codecademy's HTMl/CSS course yesterday and started working on something which doesnt really have a use but it will touch on everything and I will finish it as I learn more including PHP. I am using bootstrap right now and it honestly feels like I am cheating. I have tried to do everything myself but it basically gives you a navbar which I wont just steal and use, I will try to make my own later on. This is my current site: http://i.imgur.com/nM3wzWv.png
What should I be using? Should I cut out bootstrap and try to do everything with my own CSS?
I mean I did use my own CSS for the positioning but it doesnt seem like much. What do professionals use? Thanks.
Professionals mainly use Bootstrap or Foundation (since these are the most popular frameworks). If you're completely new, it's probably not a bad idea to code some websites from scratch to improve and probably even perfect your basic HTML/CSS skills and once you're comfortable I highly recommend using a framework. As for Bootstrap you can check out the documentation. It is very detailed and once you've figured out the basics, you're way faster than coding everything from scratch.
Generally speaking a professional application parts from a CSS framework of choise and goes arround to customizing it as needed for the application. Of course in order to learn you should neglect those when just starting in order to learn more.
professionaly speaking you use as much "premade" code as possible. That is the reason for the grat ammount of frameworks in any language.
is like asking is it okay to use JQuery it feels like cheating normally I would write like 20 lines of code but using JQuery it became a one liner.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I have just scratched the surface in the world of programming, and I need to know where to begin. I work for a Web-page writing articles, and I face a raise if I learn to format the article myself. I want to learn how to format, and also how to code. Is there anywhere in particular where I should begin my journey to programming things such as web-applications?
The following are just a hint. This journey is quite long and after a basic level, you have a multitude of options...
First of all: learn HTML. There's nothing to do if you cannot understand the content you're creating.
Learn CSS - this will help you to achieve the formatting in the right way and will make you understand how web pages are styled. That's where the fun begins, with knowing some CSS you will be able to make a web site look good.
Get a decent code editor for working, prototyping. If you really want to understand what's going on, then prefer non-WYSIWYG editors (you will see what I mean). The more decent you can get the better - this will help you in your daily work, better to not choose one which is irritating for you. (Personally I use PhpStorm which is a really good, professional tool. It might be too advanced for beginners.)
All web pages nowadays are created dynamically, for example via PHP. Learning to code in PHP will make you busy for quite a bit of time, so it would be the best to get a good book about it. (This will also start you up learning about databases, where the actual information is stored.) In my opinion, this is where the real part of web programming begins.
After writing some basic stuff with PHP, get familiar with different frameworks/CMSs just to know how we deal with big, real sites. (WordPress is great for starting and it's advanced enough to use it on a real site.) There's no point in reinventing the wheel, so always try to have a look whether others have done what you would like to do before. There's always a toolkit for the common tasks.
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 8 years ago.
Improve this question
I've been making a portfolio, And I didn't really limit myself to what would be easier to code.. So... I ended up with this (that's the homepage but almost every other page is ready too in photoshop)
http://postimg.org/image/z0w6wb4zb/
So what would be the best approach to turn this into HTML/CSS? Should I slice it into zones, or each layer separately (as in clouds, tree, island.. etc).. I was told to use semantic HTML but I'm not sure I understand what this means here.
and what do I do for the buttons? Image maps? wouldn't that be a bad idea?
Do you think this design is worth the trouble anyway?
I can't post a comment, the best I can do is answer, so here goes:
Mr. Lister is right, image maps would probably be the way to go. But, one more item that I think is worth noting, SEO value, particularly for Home/Portfolio/Contact Me/and About anchors. One potential solution is to use image-maps... but do some feature detection to see if the browser allows for the css rotate functionality.
Your HTML
<section class="homepage-navigation">
<a class="contact-me nav-link" href="/contact">Contact Me</a>
...
</section>
Your CSS could be
.home-navigation{position:relative;}
.home-navigation .nav-link{position:absolute;}
.home-navigation .contact-me{transform: rotate(-95deg);left:10px;}
So... there is a trade-off here. Using an image map and having your link text embed in the image is much easier... but you lose out on browsers seeing the anchor text. If you go the CSS route, you need to consider supporting both browsers that allow for the transform css property, and browsers that don't. :|
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 9 years ago.
Improve this question
Canvas from html5 was introduced some time ago. Currently it's used (almost) only for demonstrations how cool it is - it's mainly related to painting, games and charts. Many of them can be found at Canvas demos.
How creatively / unusually can canvas be used?
Some examples:
jsAscii - ASCII art from images with
Javascript and Canvas (yea, I
know, it's painting but not the
classic one)
Javascript compression using PNG and
Canvas
There's a really cool tool called Detexify which uses machine learning on the back end which allows you to draw the LaTeX symbol you're interested in knowing the LaTeX code of and it will suggest one for you based on what it's learned from other users.
My two favorite are:
Processing.js - an implementation of the processing language in javascript/canvas.
Bespin - a collaborative coding IDE that feels more like a beautiful native app.
I always thought of creating a simple image editor with the canvas tag. It would be easy to use it for cropping, resizing, changing color values, removing red eyes etc.