Engenho & Engenhocas: CSS

Animações CSS num piscar de olhos

Para ler

CSS Wand é uma ferramenta CSS em código aberto e disponível no Github, que permite copiar e aplicar efeitos CSS muito rapidamente numa página web, com a possibilidade de os customizar muito facilmente.

Oliver Gomes está a desenvolver este projecto utilizando as tecnologias React, Ant design, Emotion e Firebase confome anunciou aqui.

Exemplo de efeito para um botão:

button {
  color: #d0021b;
  background-color: #ac6870;
  border: 1px solid #d0021b;
  border-radius: 4px;
  padding: 0 15px;
  cursor: pointer;
  height: 32px;
  font-size: 14px;
  transition: all 0.2s ease-in-out;
}
button:hover {
  transform: scale(1.1);
}

<button>Grow</button>

Simples e rápido. Super!

fonte: Product Hunt

Ler mais Comentar

Controls and Events in ASP.NET Web Forms

Por Silvia Pinhão Lopes

Para ler

0 Comentários

Exemplo com aplicação de Bootstrap Modal Plugin

<%@ Register Src="~/Controls/ModalPopupContent.ascx" TagPrefix="uc1" TagName="ModalPopupContent" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Bootstrap Modal Using Control and Events</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
</head>
<body>
    
    <form id="form1" runat="server">

        <div class="container">
            <h5>Bootstrap Modal Popup Using Control and Events</h5>

            <!-- Trigger the modal with a button -->
            <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Open Small Modal</button>

            <uc1:ModalPopupContent runat="server" ID="ModalPopupContent" OnReadPopUpArgs="ReadPopUpArgs" />
        </div>
        <br />
        <asp:Label ID="lblShowContent" runat="server" Visible="false"></asp:Label>
    </form>
</body>

</html>

Code-behind

protected void Page_Load(object sender, EventArgs e)
        {
            lblShowContent.Text = "Popup Content: ";
        }

        protected void ReadPopUpArgs(object sender, PopupEventArgs e)
        {

            lblShowContent.Visible = !e.PopUpArgs.Count.Equals(0);

            foreach (var item in e.PopUpArgs)
            {
                lblShowContent.Text += item.ToString();
            }

        }

User Control

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p id="pContentText" runat="server">This is a small modal.</p>
            </div>
            <div class="modal-footer">
                <asp:Button ID="Button1" runat="server" Text="Close" CssClass="btn btn-default" OnClick="btnClose_Click" />
            </div>
        </div>
    </div>
</div>

Code-behind

//public event ReadPopUpArgsEventHandler ReadPopUpArgs;
        public event EventHandler<popupeventargs> ReadPopUpArgs;
        
        protected void btnClose_Click(object sender, EventArgs e)
        {
            ScriptManager.RegisterStartupScript(this, this.GetType(), "HideMyModal", "$('#myModal').modal('hide');", true);

            if (ReadPopUpArgs != null)
            {
                
                ReadPopUpArgs(this, new PopupEventArgs { PopUpArgs = new List { pContentText.InnerText } });
            }
        }

Events

public class PopupEventArgs : EventArgs
    {
        public ICollection<string> PopUpArgs { get; set; }
    }

    public delegate void ReadPopUpArgsEventHandler(object sender, PopupEventArgs popUpArgs);

Refêrencia: How To Create a Modal Box, Bootstrap Modal Plugin

Ler mais Comentar

Aplicar CSS a botão para carregamento de ficheiros

Por Silvia Pinhão Lopes

Para ler

0 Comentários

index.html

<!DOCTYPE html>
<html>
  <head>
 <link rel="stylesheet" type="text/css" href="http://geniuscarrier.com/assets/css/bootstrap.css?v=dac2c3f9e0" />
    <style>
 .file-upload {
position: relative;  
overflow: hidden;  
margin: 10px;  
}
.file-upload input.upload {
position: absolute;  
top: 0;  
right: 0;  
margin: 0;  
padding: 0;  
font-size: 20px;  
cursor: pointer;  
opacity: 0;  
filter: alpha(opacity=0);  
}
    </style>
  </head>
<body>
<br/>
<div style="display:inline; line-height: 0.7;">
<input id="uploadFile" type="text" disabled="disabled" placeholder="Seleccionar ficheiro" style="width: 250px" />
<div class="file-upload btn btn-warning" style="line-height: 0.68;">
<span>Carregar</span>
<input class="upload" id="uploadBtn" type="file" />
</div>
</div>  

<script type="text/javascript">  
document.getElementById("uploadBtn").onchange = function () {  
    document.getElementById("uploadFile").value = this.value;
};
</script>  
  </body>
</html>

O estilo aplicado ao botão é Bootstrap para simplificação conforme disponibilizado por Yang Zhao no artigo original.

O segredo está na aplicada em conjunto com o JavaScript.

vide HMTL5, AJAX e ASP.NET e o carregamento de ficheiros

fonte: How to Style a HTML file upload button in Pure CSS

Ler mais Comentar