switchon@lavalamp.biz
australia flag +61(0) 42 420 8911
south africa flag +27(0) 21 036 1165
Application & software development
Get A Quote

  • Home
  • Services
    • Application & software development
    • Outsourced software development
    • Project based resourcing
    • Digital marketing & consulting
    • Graphic design & consulting
    • UI / UX design & consulting
    • Recruitment services
    • Lease an expert
  • About
    • NBConsult Group
    • Partners
    • Lightbox Digital
  • Blog
  • Join us
  • Contact

  • Home
  • Services
    • Application & software development
    • Outsourced software development
    • Project based resourcing
    • Digital marketing & consulting
    • Graphic design & consulting
    • UI / UX design & consulting
    • Recruitment services
    • Lease an expert
  • About
    • NBConsult Group
    • Partners
    • Lightbox Digital
  • Blog
  • Join us
  • Contact

  • Home
  • Services
    • Application & software development
    • Outsourced software development
    • Project based resourcing
    • Digital marketing & consulting
    • Graphic design & consulting
    • UI / UX design & consulting
    • Recruitment services
    • Lease an expert
  • About
    • NBConsult Group
    • Partners
    • Lightbox Digital
  • Blog
  • Join us
  • Contact
switchon@lavalamp.biz
Get A Quote

  • Home
  • Services
    • Application & software development
    • Outsourced software development
    • Project based resourcing
    • Digital marketing & consulting
    • Graphic design & consulting
    • UI / UX design & consulting
    • Recruitment services
    • Lease an expert
  • About
    • NBConsult Group
    • Partners
    • Lightbox Digital
  • Blog
  • Join us
  • Contact

  • Home
  • Services
    • Application & software development
    • Outsourced software development
    • Project based resourcing
    • Digital marketing & consulting
    • Graphic design & consulting
    • UI / UX design & consulting
    • Recruitment services
    • Lease an expert
  • About
    • NBConsult Group
    • Partners
    • Lightbox Digital
  • Blog
  • Join us
  • Contact
laravel backpack
Laravel Backpack
October 10, 2019
4 handy tools for web design
4 Handy Tools For Web Design
October 23, 2019

Extracting A Colour Gradient From A Shape In PowerPoint Into CSS

css 3 in powerpoint
css 3 in powerpoint

Being a web designer / web developer, you are faced with the task of translating designs a  graphic designer's  has created for a project you are working on into code. Since this is not a task of just eyeballing what you see and making visual approximations, you sometimes have to dive deep into some tools that you do not normally work with to complete the task.

Say you are tasked with taking the following design and making a webpage with the exact same colours and it is presented to you as a power point design.

powerpoint

Assuming basic html knowledge, the following is a basic html template with bootstrap included as well as a custom css file where we will edit the colours

raw code

If you open the index.html file in a browser immediately after adding the above template it will contain a basic white block , but that certainly wont make the designer happy.

broswer search bar

What we want is the block to to look just as it did in the design as far as the gradient is concerned, and we cannot simply take an eye measurement. Fortunately we know about https://cssgradient.io/. Visiting the website we see the following.

css gradient

Css gradient is a visual tool that allows to us to convert RGB values into css code that we can use in our css file. All that is need now is to find the exact RGB values sent over by the designer in the power point file. Here is how  . .

Follow these steps in order:

1. Select the shape you want to extract colours from.

colour shade

2. Above the toolbar to the right find and click on "Shape Format"

shape format

3. In the toolbar section on the far end click on  "Format Pane"

format pane

4. Under the the tab "Shape options " expand the section "Fill" and select the "Gradient fill" radio button if not already selected

shape options

5. Still under "Gradient options" , locate "Gradient stops", click on the first gradient stop and the click the colour bucket next to the "Colour" heading

gradient options

6. Click on more colours

colours

You will end up with the following window

window

In https://cssgradient.io/ copy the the RGB values over from power point  as well as the opacity value and map it to the corresponding gradient stop.

Do the same for the second gradient stop,  steps (5  - 6 ) above and you should end up with something like this in https://cssgradient.io/

css gradient

the exact same gradient as in the design. However what we are really interested in is the css part at the bottom.

css

Copy it into your clipboard and paste into your main.css file under the ".card" class which is the same class that references the white block we currently have in our html file.Here is the result  . .

.card {
  border-radius: 0;
  background: rgb(29,72,146);
  background: linear-gradient(90deg, rgba(29,72,146,1) 0%, rgba(199,213,237,1) 100%);
}

Notice I have added a border-radius: 0 to remove the rounded edges.

Now opening  the index.html file in the browser again we should see the following . .

broswer

Here is the original design once again

design

We have successfully recreated the design sent to us with the exact colours using  html and css  😎

Contact us


    Related posts:

    how to create and digitally sign a pdf using laravel and tcpdfHow To Create And Digitally Sign A PDF Using Laravel And TCPDF laravel livewireLaravel Livewire how to deploy a backend api to azureHow To Deploy A Backend API To Azure how to deploy your app/website on herokuHow To Deploy Your App/Website On Heroku
    Share
    63
    Ronald Hove
    Ronald Hove

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    lava lamp lab secondary logo white

    Like technology, a lava lamp constantly changes form, producing new conditions with every passing moment


    lava lamp lab facebook   lava lamp lab twitter   lava lamp lab linkedin   lava lamp lab instgram

    Services

    • Application & software development
    • Outsourced software development
    • Project based resourcing
    • Digital marketing & consulting
    • Graphic design & consulting
    • UI/UX design & consulting
    • Recruitment services
    • Lease an expert

    Contact Us

    south africa+27(0) 83 419 4851

    south africa+27(0) 21 036 1165

    australia+61(0) 42 420 8911


    switchon@lavalamp.biz


    Lava Lamp Lab,
    Unit 1 Monaco Square, 14 Church Street, Durbanville, Cape Town, 7550

    NBConsult Group

    nbconsult
    designer needed
    © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
        Business Automation

        Business-specific workflows assist our clients with Disaster recovery, time tracking and invoice generation, to mention a few. If you choose to outsource your enterprise app development, we work with you to understand your business and assist to deliver automation for great business efficiency.

        eCommerce Solutions

        We are industry experts in Fintech and eCommerce, Lava Lamp Lab will help you with custom software development to provide you with the quality software services for creating online shops, Fintech mobile apps and web presence for your business of any size, allowing you to engage, sell, support and collect payments.

        Startup & Innovation

        Lava Lamp Lab believes in helping you grow your idea into a business. Our team has provided outsourced services to multiple tech start-ups and investors over the last decade, delivering innovative solutions. We have been trusted over other software development companies to build their entire technology stack.

        Data Mining

        Key to any business is the processing of websites and social network APIs, aligning the information gathered to information collected from internal enterprise systems. This big data can be rendered on reporting dashboards to create Business Intelligence. You can entrust Lava Lamp Lab to reliably deliver on this.

        Contact us now

          Application & software development

            Outsourced software development

              Project based resourcing

                Digital marketing & consulting

                  Graphic design & consulting

                    UI/UX design & consulting

                      Lease an expert

                        Recruitment services

                          We are using cookies to give you the best experience on our website.

                          You can find out more about which cookies we are using or switch them off in .

                          Lava Lamp Lab
                          Powered by  GDPR Cookie Compliance
                          Privacy Overview

                          This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

                          Strictly Necessary Cookies

                          Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

                          If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

                          3rd Party Cookies

                          This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

                          Keeping this cookie enabled helps us to improve our website.

                          Please enable Strictly Necessary Cookies first so that we can save your preferences!

                          Cookie Policy

                          More information about our Cookie Policy