IMAGE EDITOR

Morpheus
Select
collections transform reply_all fullscreen texture add_a_photo face
Grayscale Blur Brightness Contrast Invert Opacity Saturation Sepia RGB unfold_more
Loading...
Slide down above to get more filters.
There are 9 CSS based image filters and many transform methods on side panel for editing images.
I have added this section because while fiddling with CSS basic filters you might make some awesome looking custom filters, which you can copy from here.
unfold_more

× Designing webpages is easy
Designing beautiful webpages is hard
But designing responsive layouts is Headache

To make your beautiful layout to hold good for every devices & browser versions is a nightmare, offcourse there are Bootstrap classes available for that, but what I felt in my learning was that a good designer must be able to create his own Bootstrap equivalent classes.
In this design I have used many of the latest layout techniques and practices like:-
  • CSS Grid layout over the whole layout
  • CSS Flex layout in side panel icons
  • Responsive page elements for different views
  • Media queries for some troublesome small dimension phones
  • Used jQuery for better readability and saves me a lot of typing too
  • Used the CSS image filters for editing, it looks complicated but actually it was the easisest part
  • Used few transform methods for side panel editing elements
  • Linking 1 input slider with 9 filters and retaining their values over time was a bit tricky
  • You can upload images for editing and download your edited versions but not in sololearn's built in browser, it does not provides File system API (this is what I know, maybe experts can help me in that)
If anyone interested to work with me for design supports, I would gladly accept it, just send me your project link and if you like my designs, then can accept my pull requests.
Or if you want to tweak this project, then I ll share the github link with you and you can do the same.
This project has nothing fancy but hard work and detailed designing, its still not that good looking and requires further refinement in:-
  • color combinations
  • Layout alignments
  • Icon selections and size
  • Transitions
  • Ease of use
  • Lesser dependence on scripts
  • proper organisation of codes for maintainability
Which will keep happening slowly and steadily, By your feedbacks so please comment your likes and dislikes, or any advice for some new stuffs
×
compare_arrows Mirror-Y
compare_arrows Mirror-X
touch_app scroll
rotate_left Rotate Left
rotate_right Rotate Right
refresh Rotate 180
panorama_horizontal Stretch-X
panorama_vertical Stretch-Y
settings_overscan Stretch-XY
×
Creating texture is very simple for images, you just need 2 things
  1. A textured background for Image Container.
  2. Just lower image opacity, and voilla!!
For textured Background we can do it:−
  • Using Images
  • Using SVGs
  • or My favourite, using Gradient functions linear-gradient() and radial-gradient()
NOTE: all the gradient functions based textures that I have used here are from Lea Verou's site and many contributors, make sure to check out her page, creating textures from gradient functions is quite amazing, it saves us from one extra http-request and the ever precious data bandwith thus significant decrease in loading time.
And even creating one couldnt be easier, many thanks to Sacha Grief, be sure to check out this web tool too.
Can select any of the 5 textures below and see there texture background code in code section of editor
filter_1by Nate Eagle filter_2by Estelle Weyh filter_3by Lea Verou filter_4by Paul Salentiny filter_5by Paul Salentiny
×
Work under Progress
  1. Any help to upoad images here highly appreciated.
  2. Theres a way to convert your images to src text.
  3. Also I need any help on ability to download edited images.
can check out that image to text conversion tool at Sacha Grief web tool here, but its used here to create texture images.