Profile

Cover photo
Manoela Ilic
Attended Universidade Nova de Lisboa
8,274 followers|980,062 views
AboutPostsPhotos+1's

Stream

Manoela Ilic

Shared publicly  - 
 
Codrops now has a CSS Reference written by lovely +Sara Soueidan http://tympanus.net/codrops/css_reference/
62
11
Vincent Loy's profile photoJireck Jireck's profile photoVictor Alberto Gil's profile photoGabor Meszoly's profile photo
2 comments
 
Thank you, Nuno!
Add a comment...
 
Last month on Codrops:

3D Grid Effect
A proof-of-concept effect recreation of the animation seen in a prototype app by Marcus Eckert. The idea is to flip a grid item in 3D, expand it to fullscreen and reveal some associated content. We've created two demos with a vertical and a horizontal rotation.
http://tympanus.net/codrops/2014/03/27/3d-grid-effect/

Minimal Form Interface
A very simplistic form interface that shows only one text input at a time and reveals the next input with a subtle transition. The concept is based on the form at the bottom of the PageLanes website.
http://tympanus.net/codrops/2014/04/01/minimal-form-interface/

How to Create a Circular Progress Button
A tutorial on how to implement the circular progress button concept by Colin Garven. We are using the SVG line drawing animation technique as described by Jake Archibald to animate the circular progress and provide a success and error state to indicate the final status.
http://tympanus.net/codrops/2014/04/09/how-to-create-a-circular-progress-button/

Page Loading Effects
A set of creative page loading effects that use SVG animations with Snap.svg. The idea is to show an overlay with a interesting shape animation while new content gets loaded.
http://tympanus.net/codrops/2014/04/23/page-loading-effects/

Freebie: Flat Style Squared Preloaders
A set of really nice and modern animated GIF preloaders by PixelBuddha. The colorful set comes with seven unique square style activity indicators in three sizes and the Adobe After Effects file.
http://tympanus.net/codrops/2014/04/25/freebie-flat-style-squared-preloaders/
53
2
epic young's profile photoமுருகவேல் நமச்சிவாயம்'s profile photoGeist Lerner's profile photoKadir Avci's profile photo
10 comments
 
Hi, great work Mary Lou. It would be nice if you provide jquery based examples also. Expecting to get it asap..
Add a comment...

Manoela Ilic

Shared publicly  - 
 
 
This is the Virtuix Omni, a virtual reality setup which features 40 capacitive sensors in its base to track your every step and move your character inside a game. It offers analog motion: the faster you walk, the faster your virtual character walks or runs, offering an unlimited number of possible speeds. 
145 comments on original post
129
52
Tomislav Damjanovic's profile photoGemini Bataican's profile photoTamer Ziady's profile photoAndre Cameron's profile photo
12 comments
 
muito irado.
 ·  Translate
Add a comment...

Manoela Ilic

Shared publicly  - 
 
A set of flat and 3D progress button styles
http://tympanus.net/codrops/2013/12/12/progress-button-styles/
A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.
46
3
iaoraGo's profile photoQiqi Abaziz's profile photoVonVictor Valentino Rosenchild's profile photoDaniel Gratton's profile photo
7 comments
iaoraGo
 
Manoela Hello, I am trying " Timed Notifications with CSS Animations"

I performed these steps.

I plugged in my template.css all the code in your example

I inserted immediately after submit my forms this:
<div class = "tn tn-box-box-color-1">
<p> Your settings have been saved successfully! </ p>
<div class = "tn-progress"> </ div>
</ div>
 
; (; (; (Does not work; (; (; (

Question, but this is still usable? I have to add?
modernizr.custom.39460.js
Add a comment...

Manoela Ilic

Shared publicly  - 
 
Some animation ideas for thumbnail grids with illustrations by +Isaac Montemayor 
There are many parts of a website where we can apply nice transitions to make things more interesting. Images are certainly great entities for playing with fancy effects and today we'd like to show you some inspiration for thumbnail effects using CSS animations.
35
2
james f's profile photoЯвор Желязков's profile photoविवेक मिश्र's profile photo
james f
 
Very nice work
Add a comment...

Manoela Ilic

Shared publicly  - 
 
Very nice...
20
3
Renée V's profile photoRafael Ivanir Costa Oliveira's profile photoVictor Alberto Gil's profile photoaaron hensley's profile photo
5 comments
 
+Renée V asgeir*
Add a comment...
Have her in circles
8,274 people
Habil BOZALİ's profile photo
Zia Hashmi's profile photo
Европолл's profile photo
Imran Ali's profile photo
Darin L. Hammond's profile photo
Damon Karr's profile photo
Jhon Sampurno's profile photo
tim pham's profile photo
Savino Rasola's profile photo

Manoela Ilic

Shared publicly  - 
 
So awesome :)
19
3
Olasman Sunero's profile photoZaur Budtuev's profile photoTerence M. Gray's profile photoThomas Brillon's profile photo
9 comments
 
you rite
Add a comment...

Manoela Ilic

Shared publicly  - 
 
Some effects for a perspective page view navigation
http://tympanus.net/codrops/2013/12/18/perspective-page-view-navigation/
Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mobile app design and we wanted to explore some more effects.
40
4
Francesco Primiceri's profile photoAmal Ajith's profile photoBeatriz Harnois's profile photoMitr V's profile photo
11 comments
 
hi, i am using your bookcblock code. Can you help me remove the css3d transitions please. I just want the page to go next, without the page flip effect. This is because it does not work well with ipads. Please help, my email is colossaloneinc at gmail dot com. .. thank you!!!
Add a comment...

Manoela Ilic

Shared publicly  - 
 
And here is a summery of all the latest articles on Codrops:

Multi-Item Selection
A little script by Pedro that allows the swift selection of multiple checkboxes: http://tympanus.net/codrops/2013/10/29/multi-item-selection/

Medium-Style Page Transitions
See +Brian Gonzalez's excellent remake of the beautiful Medium effect: http://tympanus.net/codrops/2013/10/30/medium-style-page-transition/

Animated SVG Icons with Snap.svg
An experiment using Snap.svg for making little animations on SVG icons: http://tympanus.net/codrops/2013/11/05/animated-svg-icons-with-snap-svg/

CSS Overlay Techniques
+Sara Soueidan explores all possibilities for creating overlays using CSS: http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

Elastic Stack: Elastic Dragging Interaction
A script that allows navigating through images by dragging them, with an elastic feel: http://tympanus.net/codrops/2013/11/12/elastic-stack-elastic-dragging-interaction/

Animated Opening Type
+Diego Pardo creates a beautiful animated 3D opening type effect with pseudo-elements: http://tympanus.net/codrops/2013/11/14/animated-opening-type/

Techniques for Responsive Typography
A wonderful write-up by +Sara Soueidan on how to make responsive typography work: http://tympanus.net/codrops/2013/11/19/techniques-for-responsive-typography/

Applying App Design Concepts to Website Design
+Kayla Knight shows how principles and techniques of app design can be beneficial for website design: http://tympanus.net/codrops/2013/11/22/applying-app-design-concepts-to-website-design/

SVG Icons FTW
+Oleg Solomka shows why SVG icons rock: http://tympanus.net/codrops/2013/11/27/svg-icons-ftw/

Techniques for Creating Textured Text
Another great article by +Sara Soueidan on how to create text with image or texture backgrounds: http://tympanus.net/codrops/2013/12/02/techniques-for-creating-textured-text/
In this article we'll explore all the current techniques for creating image or texture filled text and show you how to apply them.
26
1
usman ramzan's profile photoKaan Özcan's profile photorahul kumar's profile photoVonVictor Valentino Rosenchild's profile photo
3 comments
Add a comment...

Manoela Ilic

Shared publicly  - 
 
Love the deep bass...
20
1
dominik schopper's profile photoSheryar Nizar's profile photoaaron hensley's profile photoNikhil Johny's profile photo
3 comments
 
Nice and mellow... Haunting lyrics. Thanks for sharing!
Add a comment...

Manoela Ilic

Shared publicly  - 
By animating an SVG path with JavaScript, we can do many fancy things. Today we want to show you some effects for checkboxes and radio buttons. The idea is to hide the inputs, use pseudo-elements to create a more appealing style and then animate the SVG paths once an input is selected.
56
7
Dávid Barkóczi's profile photoBrittany Thompson's profile photoAndre Cameron's profile photoVonVictor Valentino Rosenchild's profile photo
3 comments
 
Looks like stroke-dashoffset in 'input[type="checkbox"]+svg path' must be equal to path stroke-dasharray params
Example:
http://jsfiddle.net/6MR2z/4/
Add a comment...
People
Have her in circles
8,274 people
Habil BOZALİ's profile photo
Zia Hashmi's profile photo
Европолл's profile photo
Imran Ali's profile photo
Darin L. Hammond's profile photo
Damon Karr's profile photo
Jhon Sampurno's profile photo
tim pham's profile photo
Savino Rasola's profile photo
Education
  • Universidade Nova de Lisboa
    Computational Logic, 2005 - 2008
  • University of Osnabrück
    Cognitive Science, 2001 - 2005
Story
Introduction
I create fun stuff @codrops. I enjoy Cognitive Science, Artificial Intelligence and UI Design. 
Basic Information
Gender
Female
Manoela Ilic's +1's are the things they like, agree with, or want to recommend.
Paulund
plus.google.com

PHP, Wordpress, jQuery, CSS and HTML5 Tutorials And Snippets

Mashable
plus.google.com

Empowering and inspiring people by spreading knowledge of social media and technology

Codrops
plus.google.com

Codrops is dedicated to provide useful tutorials, insightful articles, creative inspiration and free resources for web designers and developers

Anariel Design
plus.google.com

WordPress themes, site templates, responsive design ,web design,different, unique,creative

rOtal
market.android.com

With this application you can train your mental rotation skills.Mental rotation is somewhat localized to the right cerebral hemisphere. It i

Happy Sheep
market.android.com

Happy Sheep is a fun game with jumping sheep and it's different everytime!Happy Sheep will give you and your kids loads of fun. The sheep ar

Experiments with background-clip: text
tympanus.net

With the CSS property background-clip: text (which is currently only supported in Webkit browsers), we can add a background image to a text

Hover and Click Trigger for Circular Elements with jQuery
tympanus.net

Today we want to share one possible solution to the circle hovering problem. We'll create a plugin that will take care of the 'mouseenter',

Subtle Patterns
subtlepatterns.com

Free high quality patterns for your next web project.

25 Examples of Perfect Color Combinations in Web Design
tympanus.net

Today we will show you some examples of websites that are using beautiful and inspiring color combinations that match perfectly and create a

Experimental CSS3 Animations for Image Transitions
tympanus.net

Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We'll be using CSS3 3D Transform

Inspiring Examples of Symbol and Metaphor Use in Web Design
tympanus.net

There are many creative ways of showing what a website is about: the use of images, videos, descriptions and more. Symbolic graphics and met

Use :pseudo-elements as list-style-image alternatives | CSS-Plus
css-plus.com

Styling lists with CSS can be a bit of a pain from time to time. If I require an kind of customized bullet, the first CSS property I think o

Multi-level Photo Map
tympanus.net

This multi-level map based image gallery makes it possible to show images related to their location. The first level indicates the location

borderとtransitionを使ったエフェクト
jsdo.it

borderとtransitionを使ったエフェクト by ksk1015 @ jsdo.it - share JavaScript, HTML5 and CSS - jsdo.it is a service to write JavaScript, HTML5, CSS in

Find New York Restaurants, Bars, Hotels, Shopping, Movies, Deals, Parkin...
www.citymaps.com

Jump To. Brooklyn. Bay Ridge; Boerum Hill; Carroll Gardens; Cobble Hill; Downtown; Fort Green; Park Slope; Red Hook; Williamsburg. Manhattan

Draggable Image Boxes Grid
tympanus.net

Today we want to create a template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes

Item Blur Effect with CSS3 and jQuery
tympanus.net

Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blu

Circle Navigation Effect with CSS3
tympanus.net

Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular naviga

A free and open world depends on a free and open web. | Google
www.google.com

A free and open world depends on a free and open Internet. Governments alone, working behind closed doors, should not direct its future. The